@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;650;700&display=swap');
:root{color-scheme:dark;--bg:#0b0e0c;--text:#f0f3ed;--muted:#a4afa2;--accent:#d7fa78;--line:#2a332a;font-family:'DM Sans','Segoe UI',sans-serif;scroll-behavior:smooth;scroll-padding-top:24px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,.category-panel:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:var(--accent);color:var(--bg)}[hidden]{display:none!important}.skip-link{position:fixed;top:-120px;left:20px;z-index:20;background:var(--accent);color:var(--bg);padding:14px}.skip-link:focus{top:15px}
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 85% 10%,#b4f8680c,transparent 50%),var(--bg)}.ambient-grid{position:absolute;inset:0;background-image:linear-gradient(#b4d78a07 1px,transparent 1px),linear-gradient(90deg,#b4d78a07 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(black,transparent 85%)}.ambient-light{position:absolute;top:-200px;right:5%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,#bafa6012,transparent 65%);animation:ambient-drift 18s ease-in-out infinite alternate}.shell{max-width:1440px;margin:auto;padding:0 64px}.header{height:98px;display:flex;gap:35px;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:24px;letter-spacing:-.9px}.brand-icon{display:block;border-radius:10px;box-shadow:0 0 28px #c9ff5e13}.brand-period{color:var(--accent);margin-left:3px;font-weight:400}.header nav{margin-left:auto}.nav-link{display:flex;align-items:center;gap:20px;min-height:44px;font-size:14px}.nav-link span{color:var(--accent)}.motion-toggle{border:1px solid #47523e;color:#c4ceba;background:#151b13;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:border-color .2s,background .2s}.motion-toggle:hover{border-color:var(--accent);background:#252f1c}.motion-label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.intro{display:flex;justify-content:space-between;gap:40px;padding:53px 0 44px}.intro-copy{min-width:0}.eyebrow,.coordinate,.count,.section-note,.project-meta,.project-kicker,.image-label,.collection-end{font-family:Consolas,'Courier New',monospace}.eyebrow{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:1.7px;color:#bbc8b1;margin:0 0 18px}.eyebrow-line{width:25px;height:2px;background:var(--accent);box-shadow:0 0 15px #d7fa7877}h1{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-size:clamp(64px,6.7vw,96px);font-weight:700;line-height:.98;letter-spacing:-1px;margin:0}h1 span{color:var(--accent)}.intro-bottom{display:flex;align-items:center;gap:48px;margin-top:22px}.intro-bottom p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}.explore-link{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:44px;border-bottom:1px solid #748558;font-size:13px}.explore-link span{color:var(--accent);font-size:22px;transition:transform .25s}.explore-link:hover span{transform:translate(3px,3px)}.intro-aside{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:0 0 4px;min-width:190px}.coordinate{font-size:10px;letter-spacing:1.4px;color:#86927d}.index-mark{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;font-size:92px;line-height:1;letter-spacing:-8px;color:transparent;-webkit-text-stroke:1px #596747;position:relative}.index-mark span{-webkit-text-stroke:1px #3b4733}.index-mark i{font-size:37px;letter-spacing:0;font-style:normal;position:absolute;right:-4px;top:-5px;color:var(--accent);-webkit-text-stroke:0}
.section-heading{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:23px 0 20px}.section-heading h2{margin:0;display:flex;gap:13px;align-items:center;font-size:20px;font-weight:500;letter-spacing:-.5px}.count{font-size:11px;border:1px solid #46523b;padding:3px 7px;color:#afbe9a;border-radius:4px}.section-note{font-size:10px;letter-spacing:1.4px;color:#93a08a}.section-note span{color:var(--accent);margin-left:17px;font-size:19px}.category-tabs{position:relative;isolation:isolate;display:flex;gap:4px;width:fit-content;max-width:100%;padding:5px;margin-bottom:22px;border:1px solid #34402b;border-radius:10px;background:#131911}.category-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:10px 26px;border:0;border-radius:6px;background:transparent;color:#bbc4b2;font-size:14px;transition:color .2s}.category-tab:hover{color:var(--accent)}.category-tab[aria-selected=true]{background:var(--accent);color:#17200d;font-weight:650}.tabs-enhanced .category-tab[aria-selected=true]{background:transparent}.tab-count{font-size:11px;opacity:.7;font-family:Consolas,monospace}.tab-indicator{display:none;position:absolute;left:0;top:5px;bottom:5px;z-index:-1;background:var(--accent);border-radius:6px;box-shadow:0 0 25px #c5ff5c13;transition:transform .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}.tabs-enhanced .tab-indicator{display:block}.project-list{display:grid;gap:24px}.category-panel{border-radius:14px}.category-panel:not([hidden]){animation:panel-enter .4s both}
.project-card{position:relative;display:block;isolation:isolate;border:1px solid #526046;border-radius:14px;overflow:hidden;background:#071017;min-height:440px;transform:perspective(1400px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg));transition:transform .35s ease,border-color .3s,box-shadow .3s}.project-card:hover{border-color:#b2d56d;box-shadow:0 15px 70px #0007,0 0 30px #b4f4600b}.project-card:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(350px circle at var(--pointer-x,70%) var(--pointer-y,30%),#d7fa7810,transparent);opacity:0;transition:opacity .3s}.project-card:hover:after{opacity:1}.project-art{position:absolute;inset:0;z-index:-2;overflow:hidden}.game-image{height:100%;width:100%;display:block;object-fit:cover;object-position:50% 52%;transform:translateX(14%) scale(1.015);transition:transform 1.2s cubic-bezier(.22,1,.36,1)}.project-card:hover .game-image{transform:translateX(14%) scale(1.055)}.project-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#071017 0%,#071017f7 19%,#071017cd 34%,#07101745 52%,transparent 72%),linear-gradient(0deg,#040b11cc,transparent 30%,transparent 90%,#040b1160)}.image-label{position:absolute;right:25px;bottom:23px;z-index:1;color:#b9cbb5;font-size:9px;letter-spacing:1.5px}.project-copy{padding:33px 40px;position:relative;width:49%;min-height:440px;display:flex;flex-direction:column}.project-meta{display:flex;gap:20px;align-items:center;font-size:11px;letter-spacing:1.1px}.project-number{color:#a6b59a}.tag{padding:5px 9px;border:1px solid #748e484d;background:#a2d2640f;color:#d7fa78;border-radius:4px;font-size:10px}.project-title-block{margin:48px 0 30px}.project-title-block .project-kicker{font-size:10px;letter-spacing:2.3px;color:#c9dcaf;margin-bottom:11px}.project-title-block h3{font-family:'Barlow Condensed','Arial Narrow',Impact,sans-serif;text-transform:uppercase;font-size:76px;font-weight:600;line-height:1;letter-spacing:-1px;margin:0 0 17px}.project-title-block h3 span{font-family:'DM Sans',sans-serif;font-size:29px;color:var(--accent);vertical-align:top;display:inline-block;margin:9px 0 0 15px;transition:transform .3s}.project-card:hover h3 span{transform:translate(4px,-4px)}.project-title-block p{font-size:16px;line-height:1.6;color:#bdc7c1;margin:0}.project-bottom{display:flex;align-items:flex-start;flex-direction:column;gap:14px;margin-top:auto}.launch{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:14px 19px;min-height:50px;border-radius:5px;background:var(--accent);color:#15200b;font-size:14px;font-weight:700;box-shadow:0 0 30px #d7fa780c;transition:background .25s,box-shadow .25s}.project-card:hover .launch{background:#e6ffb1;box-shadow:0 0 30px #d7fa7824}.launch span{font-size:19px}.project-host{color:#90a090;font-size:11px;overflow-wrap:anywhere}.project-card:not(.featured-card){min-height:300px;background:#151c12}.project-card:not(.featured-card) .project-copy{width:100%;min-height:300px}
.category-empty{min-height:340px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 25px;text-align:center;border:1px dashed #414e34;border-radius:14px;background:linear-gradient(135deg,#1b2417,#101610)}.empty-mark{width:48px;height:48px;display:grid;place-items:center;border:1px solid #4c623a;border-radius:10px;color:var(--accent);font-size:27px;margin-bottom:20px}.category-empty h3{margin:0 0 12px;font-weight:500;font-size:25px;letter-spacing:-.5px}.category-empty p{margin:0;color:var(--muted);font-size:16px;line-height:1.6}.collection-end{display:flex;align-items:center;gap:24px;margin:30px 0 35px}.collection-end p{font-size:9px;letter-spacing:1.6px;color:#8e9b82;margin:0;text-align:center;line-height:1.6}.end-line{height:1px;flex:1;background:var(--line)}footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:24px;padding:26px 0 30px}.footer-brand{display:flex;align-items:center;gap:9px;font-size:14px;letter-spacing:-.3px;font-weight:700}.footer-brand span{color:var(--accent)}footer p{font-size:12px;color:#92a087;margin:0}.back-top{margin-left:auto;display:flex;align-items:center;gap:16px;min-height:44px;font-size:12px;color:#b3c0a8}.back-top span{color:var(--accent)}.intro-copy,.intro-aside{animation:panel-enter .65s both}.intro-aside{animation-delay:.12s}
@keyframes panel-enter{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes ambient-drift{to{transform:translate(-110px,100px) scale(1.3)}}html.motion-paused{scroll-behavior:auto}html.motion-paused *,html.motion-paused *:after{animation:none!important;transition:none!important}html.motion-paused .project-card{transform:none}
@media(max-width:1100px){.shell{padding:0 40px}.intro{gap:25px}.intro-aside{min-width:150px}.coordinate{font-size:9px}.intro-bottom{gap:28px}h1{font-size:76px}.project-copy{width:57%;padding:30px}.project-title-block h3{font-size:67px}.project-art:after{background:linear-gradient(90deg,#071017 0%,#071017ed 25%,#07101790 45%,transparent 80%),linear-gradient(0deg,#040b11cc,transparent 40%)}.image-label{font-size:8px}}
@media(max-width:800px){.shell{padding:0 28px}.header{height:84px;gap:23px}.brand{font-size:22px}.intro{padding:39px 0}.intro-aside{display:none}h1{font-size:clamp(62px,10vw,78px)}.intro-copy{width:100%}.intro-bottom{justify-content:space-between}.project-copy{width:67%}.project-title-block h3{font-size:66px}.project-art:after{background:linear-gradient(90deg,#071017 0%,#071017df 25%,#0710177a 55%,#07101720 90%)}.image-label{max-width:95px;line-height:1.6}.project-title-block p{font-size:15px}}
@media(max-width:560px){.shell{padding:0 20px}.header{height:78px;gap:15px}.brand{font-size:19px;gap:8px;letter-spacing:-.8px}.brand-icon{width:34px;height:34px}.nav-link{font-size:12px;gap:6px}.motion-toggle{flex-shrink:0}.intro{padding:34px 0 30px}.eyebrow{font-size:9px;letter-spacing:1px;gap:8px;margin-bottom:15px}.eyebrow-line{width:17px}h1{font-size:clamp(56px,12.5vw,70px);line-height:1;letter-spacing:-.5px}h1 span{display:block}.intro-bottom{flex-direction:column;align-items:flex-start;gap:15px;margin-top:18px}.intro-bottom p{font-size:14px}.explore-link{font-size:12px}.section-heading{padding:20px 0 17px}.section-heading h2{font-size:18px}.section-note{display:none}.category-tabs{width:100%;margin-bottom:18px;gap:3px}.category-tab{flex:1;min-width:0;padding:10px 7px;gap:9px}.project-card{display:flex;flex-direction:column;min-height:0;border-radius:11px}.project-art{position:relative;inset:auto;z-index:0;height:235px;order:0;flex-shrink:0}.game-image{object-position:49% 48%;object-fit:cover;transform:scale(1.05)}.project-art:after{background:linear-gradient(0deg,#071017,transparent 40%)}.image-label{top:17px;bottom:auto;left:20px;right:auto;max-width:none;font-size:8px}.project-copy{width:100%;min-height:0;padding:0 25px 26px;order:1;margin-top:-3px}.project-meta{font-size:10px}.project-title-block{margin:25px 0 25px}.project-title-block .project-kicker{font-size:9px}.project-title-block h3{font-size:61px;margin-bottom:14px}.project-title-block p{font-size:15px}.project-bottom{gap:15px}.launch{width:100%;min-height:50px}.project-host{font-size:10px}.category-empty{min-height:310px}.category-empty h3{font-size:23px}.category-empty p{font-size:15px}.collection-end{gap:13px;margin:25px 0}.collection-end p{font-size:8px;letter-spacing:1px;max-width:200px}footer{flex-wrap:wrap;gap:12px;padding:19px 0 25px}footer p{order:3;width:100%;font-size:11px}.footer-brand{font-size:13px}.back-top{font-size:11px}.project-card:hover .game-image{transform:scale(1.05)}}
@media(max-width:380px){.header nav{display:none}.motion-toggle{margin-left:auto}.project-art{height:210px}.project-copy{padding-left:22px;padding-right:22px}.project-title-block h3{font-size:55px}.brand{font-size:20px}}
@media(min-width:561px){.project-art:after{background:linear-gradient(90deg,#071017 0%,#071017 38%,#071017de 45%,#07101738 59%,transparent 75%),linear-gradient(0deg,#040b11aa,transparent 30%)}}
@media(max-width:560px){.game-image,.project-card:hover .game-image{transform:scale(1.45);object-position:49% 48%}}
/* Motion layer: compositor animations plus a lightweight, capped particle canvas. */
#atmosphere-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.header{position:relative;z-index:5;background:linear-gradient(90deg,#0b0e0c00,#0b0e0c88)}
.intro{position:relative;isolation:isolate;overflow-x:clip;overflow-y:visible;min-height:330px;padding-top:65px;padding-bottom:52px}
.intro-copy{position:relative;z-index:2;max-width:78%}.intro-aside{display:none}
.hero-art{position:absolute;z-index:-1;pointer-events:none;width:69%;height:450px;right:-40px;top:-55px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 26%,black 90%,transparent)}
.hero-art img{width:100%;height:100%;object-fit:cover;opacity:.95;animation:gateway-float 10s ease-in-out infinite;mask-image:linear-gradient(0deg,transparent,black 20%,black 85%,transparent)}
.hero-orbit{position:absolute;right:16%;top:27%;width:190px;height:190px;border-radius:50%;border:1px solid #caff7322;border-top-color:#dfff99bb;border-right-color:#dfff9940;filter:drop-shadow(0 0 5px #bcff56);animation:orbit-trace 12s linear infinite;transform:rotate(-24deg) scaleX(.77)}
.hero-spark{position:absolute;right:19%;top:39%;width:5px;height:5px;background:#e1ffb5;border-radius:50%;box-shadow:0 0 20px 6px #bafa6066;animation:spark-flight 9s ease-in-out infinite}
h1 span{background:linear-gradient(100deg,#d7fa78 10%,#d7fa78 32%,#faffee 45%,#bff64b 58%,#d7fa78 78%);background-size:250% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:title-shimmer 8s ease-in-out infinite;text-shadow:0 0 35px #d7fa780a}
.brand-icon{animation:emblem-charge 6s ease-in-out infinite}
.eyebrow-line{transform-origin:left;animation:signal-line 4s ease-in-out infinite}
.featured-card:before{content:'';position:absolute;top:0;left:0;z-index:5;width:32%;height:2px;background:linear-gradient(90deg,transparent,#e7ffb3,transparent);filter:drop-shadow(0 0 4px #c1ff60);animation:edge-trace 7s ease-in-out infinite;pointer-events:none}
.game-image{animation:world-drift 18s ease-in-out infinite alternate}
.launch{position:relative;overflow:hidden}.launch:after{content:'';position:absolute;inset:-60% auto -60% -80%;width:40%;background:linear-gradient(90deg,transparent,#fff7,transparent);transform:rotate(24deg);animation:launch-sheen 6s ease-in-out infinite;pointer-events:none}
.intro-copy{animation:hero-arrive .85s cubic-bezier(.22,1,.36,1) both}.intro-bottom{animation:hero-arrive .85s .12s cubic-bezier(.22,1,.36,1) both}.collection{animation:hero-arrive .8s .18s cubic-bezier(.22,1,.36,1) both}.category-panel:not([hidden]){animation:panel-enter .45s cubic-bezier(.22,1,.36,1) both}
@keyframes gateway-float{0%,100%{transform:translateY(6px) scale(1.025) rotate(-1deg)}50%{transform:translateY(-12px) scale(1.06) rotate(1deg)}}
@keyframes orbit-trace{to{transform:rotate(336deg) scaleX(.77)}}
@keyframes spark-flight{0%,100%{transform:translate(0,0);opacity:.5}35%{transform:translate(-70px,-55px);opacity:.9}70%{transform:translate(-125px,40px);opacity:.3}}
@keyframes title-shimmer{0%,20%{background-position:100% 50%}70%,100%{background-position:0 50%}}
@keyframes emblem-charge{0%,100%{box-shadow:0 0 15px #c9ff5e15}50%{box-shadow:0 0 28px #c9ff5e50}}
@keyframes signal-line{0%,100%{scale:1 1;opacity:.7}50%{scale:1.5 1;opacity:1}}
@keyframes edge-trace{0%{translate:-105% 0;opacity:0}15%{opacity:1}70%{translate:415% 0;opacity:1}80%,100%{translate:415% 0;opacity:0}}
@keyframes world-drift{from{scale:1}to{scale:1.025}}
@keyframes launch-sheen{0%,50%{left:-80%}85%,100%{left:160%}}
@keyframes hero-arrive{from{opacity:0;translate:0 18px;filter:blur(5px)}to{opacity:1;translate:0 0;filter:blur(0)}}
html.motion-paused *,html.motion-paused *:before,html.motion-paused *:after{animation:none!important;transition:none!important}
html.page-hidden *,html.page-hidden *:before,html.page-hidden *:after{animation-play-state:paused!important}
@media(max-width:1100px){.hero-art{width:72%;right:-30px}.intro-copy{max-width:80%}.intro-aside{min-width:120px}.intro-aside .coordinate{font-size:8px;max-width:115px;line-height:1.6;text-align:right}}
@media(max-width:800px){.intro-copy{max-width:100%}.hero-art{width:75%;right:-50px;opacity:.65}.hero-orbit{display:none}.intro{min-height:300px;padding-top:50px;padding-bottom:42px}.intro-copy h1{font-size:clamp(60px,10vw,78px)}}
@media(max-width:560px){.intro{min-height:320px;padding:37px 0 32px}.hero-art{width:370px;height:350px;right:-80px;top:-24px;opacity:.52;mask-image:linear-gradient(90deg,transparent,black 38%,black 95%,transparent)}.hero-art img{object-fit:cover}.hero-spark{opacity:.4}.intro-copy h1{font-size:clamp(56px,12.5vw,70px);text-shadow:0 2px 15px #0008}.intro-bottom p{color:#bbc5b4;text-shadow:0 2px 6px #000}.intro-bottom{gap:18px}.ambient-light{width:350px;height:350px}#atmosphere-canvas{opacity:.7}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:after,*:before{animation:none!important;transition:none!important}.project-card{transform:none!important}}
