*{box-sizing:border-box;margin:0;padding:0}:root{--color-accent:#39692d;--color-header-bg:#232222;--color-header-text:#e0e0e0;--color-footer-bg:#232222;--color-footer-text:#aaa;--color-danger:#39692d;--color-secondary:#64748b;--color-border:#e2e8f0;--color-text:#1e293b;--color-primary:#39692d;--background:#141414;--glitter:url(https://assets.codepen.io/13471/noise-base.png);--glitter2:url(https://assets.codepen.io/13471/noise-top.png);--light-size:300px;--font-base:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--transition-fast:.15s ease;--transition-base:.3s ease;--transition-slow:.5s ease}body{font-family:var(--font-base);color:var(--color-text);background-color:var(--background);flex-direction:column;min-height:100vh;font-size:1rem;display:flex}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2}.btn{cursor:pointer;transition:background-color var(--transition-fast), transform var(--transition-fast);border:none;border-radius:6px;justify-content:center;align-items:center;gap:.25rem;padding:.5rem 1rem;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:color-mix(in srgb, var(--color-primary) 85%, black)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.modal-backdrop{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-backdrop.transparent{background:0 0}.header{background:var(--color-header-bg);border-bottom:2px solid var(--color-accent);z-index:100;justify-content:space-between;align-items:center;padding:1.5rem 3rem;display:flex;position:relative;box-shadow:0 4px 20px #39692d33}.header-title{background:linear-gradient(45deg, var(--color-accent), #39692d);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin:0;font-size:2rem;font-weight:700}.language-wrapper{position:relative}.language-btn{color:var(--color-header-text);border:2px solid var(--color-accent);cursor:pointer;width:160px;transition:all var(--transition-base);background:#39692d26;border-radius:6px;padding:.5rem 1.5rem;font-size:1rem;font-weight:600}.language-btn:hover{background:var(--color-accent);color:#fff;transform:scale(1.05);box-shadow:0 4px 20px #39692d33}.dropdown{z-index:1001;background:var(--color-header-bg);border:2px solid var(--color-accent);width:160px;animation:slideDown var(--transition-base);border-radius:6px;flex-direction:column;gap:.25rem;padding:1rem;display:flex;position:absolute;top:calc(100% + 10px);right:0;box-shadow:0 10px 30px #00000080}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.dropdown button{color:var(--color-header-text);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:6px;padding:.5rem 1rem;font-size:1rem;font-weight:500}.dropdown button:hover{background:var(--color-accent);color:#fff}.main{flex:1;width:100%;padding:1.5rem 3rem}.cards-grid{grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;width:100%;padding:2rem;display:grid}.cards-grid>.card-wrapper>.card-item:before{opacity:1;transition-delay:.1s}.cards-grid>.card-wrapper>.card-item:after{opacity:.925;transition-delay:0s}.card-wrapper{display:contents}.card-item{width:100%;height:260px;image-rendering:pixelated;text-align:center;background-color:#212121;border-radius:10px;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative}.card-item:before,.card-item:after{image-rendering:pixelated;transition:opacity .5s}.card-item:after{--bgoffsetx:calc(3px * var(--ratio-x));--bgoffsety:calc(3px * var(--ratio-y));--pointerx:calc(100% * var(--ratio-x));--pointery:calc(100% * var(--ratio-y));background-image:radial-gradient(var(--light-size) circle at var(--pointerx) var(--pointery), #000000bf,black), radial-gradient(var(--light-size) circle at var(--pointerx) var(--pointery), #252525cc, #101010 calc(var(--light-size) * 1)), var(--glitter2), var(--glitter2);background-position:center, center, center, calc(var(--bgoffsetx)*1) calc(var(--bgoffsety)*1);background-blend-mode:normal, color-burn, color-dodge;filter:brightness(1.4)contrast(.725);opacity:0;z-index:2;content:"";z-index:2;background-size:cover;border-radius:9px;width:calc(100% - 2px);height:calc(100% - 2px);transition-delay:.1s;position:absolute;inset:1px}.card-item:before{content:"";background-image:conic-gradient(from 0deg at calc(0% + var(--mouse-x)) calc(0% + var(--mouse-y)), #ffbd8c 0%, #fd8585 11%, #fd8585 15%, #f882ff 27%, #f882ff 31%, #8785fe 42%, #8785fe 46%, #9afcff 55%, #9afcff 59%, #99fd9c 70%, #99fd9c 74%, #fffd84 87%, #fffd84 91%, #ffbd8c 100%), radial-gradient(calc(var(--light-size)*1.5) circle at var(--mouse-x) var(--mouse-y) , #ffffffb3, #00000080 50%), radial-gradient(calc(var(--light-size)*1.5) circle at var(--mouse-x) var(--mouse-y) , transparent, #21162c 60%, var(--background) 120%);background-blend-mode:hue, color-dodge;z-index:1;content:"";border-radius:inherit;opacity:0;background-color:#fff0;width:100%;height:100%;transition-delay:0s;position:absolute;top:0;left:0}.card-content{z-index:3;color:#fff;position:relative}.glitter{opacity:0;width:1px;height:1px;position:absolute}.modal-item{border:2px solid var(--color-accent);animation:scaleIn var(--transition-base);background:#fff;border-radius:6px;margin:2rem;position:relative;box-shadow:0 20px 60px #0000004d}.modal-content{max-height:80vh;margin-top:2rem;margin-right:.3rem;padding:2rem;overflow-y:auto}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.modal-item .modal-close-btn{cursor:pointer;color:var(--color-secondary);transition:all var(--transition-fast);background:0 0;border:none;border-radius:50px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.5rem;display:flex;position:absolute;top:1rem;right:1rem}.modal-item .modal-close-btn:hover{color:var(--color-danger);background:#dc26261a;transform:rotate(90deg)}.modal-content{flex-direction:column;gap:1.5rem;display:flex}.modal-content h2{color:var(--color-accent);text-align:center;margin:0;font-size:2rem}.modal-content .author{text-align:center;color:var(--color-secondary);border-bottom:1px solid var(--color-border);margin:0;padding-bottom:1rem;font-style:italic}.modal-content .image-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1rem 0;display:grid}.modal-content .image-grid img{object-fit:cover;border:2px solid var(--color-border);width:100%;height:150px;transition:all var(--transition-base);border-radius:6px}.modal-content .image-grid img:hover{border-color:var(--color-accent);transform:scale(1.05);box-shadow:0 4px 12px #e9456033}.modal-content .description{border-left:4px solid var(--color-accent);color:var(--color-text);background:#e945600d;border-radius:12px;padding:1.5rem;line-height:1.8}.footer{background:var(--color-footer-bg);text-align:center;border-top:2px solid var(--color-accent);margin-top:auto;padding:1.5rem 3rem}.footer h3{color:var(--color-footer-text);letter-spacing:1px;margin:0;font-weight:400}.footer h3 span{color:var(--color-accent);font-weight:600}@media (width<=768px){.header{flex-direction:column;gap:1rem;padding:1rem 1.5rem}.header-title{font-size:1.5rem}.main{padding:1.5rem}.cards-grid{grid-template-columns:1fr;gap:1rem}modal-item{min-width:unset;width:95%;padding:1.5rem}.modal-content h2{font-size:1.5rem}.modal-content .image-grid{grid-template-columns:1fr}.modal-content .image-grid img{height:200px}.footer{padding:1rem 1.5rem}.dropdown{min-width:120px;right:50%;transform:translate(50%)}@keyframes slideDown{0%{opacity:0;transform:translate(50%)translateY(-10px)}to{opacity:1;transform:translate(50%)translateY(0)}}}@media (width>=769px) and (width<=1024px){.cards-grid{grid-template-columns:repeat(2,1fr)}}