:root{--bg: #05050c;--bg2: #0c0c16;--panel: #10101c;--line: #252538;--txt: #e8eaf4;--dim: #8b90a8;--cyan: #00e8ff;--magenta: #ff2d8a;--violet: #7c5cff;--mono: "DM Mono", ui-monospace, monospace;--display: "Syne", system-ui, sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.55}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(rgba(0,232,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,232,255,.03) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black,transparent)}#showcase{position:relative;max-width:1180px;margin:0 auto;padding:0 20px 64px;background:linear-gradient(to bottom,var(--bg) 0%,transparent 12%,transparent 88%,var(--bg) 100%),url(/marketing/grid-cyberpunk-1920x1080.png) center top / cover no-repeat}.heroLanding{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;background:var(--bg)}#hero-wall{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.heroOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;min-height:100vh;min-height:100dvh;width:100%;pointer-events:none;background:linear-gradient(to bottom,#05050ce6,#05050c00 18%,#05050c00 82%,#05050cb3),linear-gradient(to right,#05050c,#05050cfa 30%,#05050c99,#05050c1a 80%,#05050c00)}.heroOverlayInner{--hero-side-inset: clamp(20px, 3vw, 40px);display:flex;align-items:center;justify-content:flex-start;gap:clamp(24px,3vw,48px);height:100dvh;width:100%;max-width:1600px;margin-left:auto;margin-right:auto;padding:clamp(16px,3vh,32px) calc(var(--hero-side-inset) * 2) clamp(16px,3vh,32px) clamp(32px,5vw,80px);box-sizing:border-box;overflow:hidden}.heroOverlayPanel{pointer-events:auto;flex:0 0 clamp(340px,40vw,520px);max-width:100%;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0}.heroCopy h1,.heroCopy .heroTitleBrand{display:block;font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.05}.heroTitleBrand{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:800;color:var(--txt)}.heroTitleSub{display:flex;flex-direction:column;align-items:stretch;width:max-content;max-width:100%;gap:10px}.heroTitleTag{font-size:clamp(1.25rem,2.5vw,1.9rem);font-weight:600;color:var(--cyan);white-space:nowrap}.heroMeta{display:flex;flex-wrap:nowrap;gap:6px;width:max-content;min-width:100%;max-width:100%}.heroMetaPill{flex:1 1 auto;min-width:max-content;font-family:var(--mono);font-size:clamp(.7rem,1.3vw,.92rem);font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--magenta);border:1px solid var(--magenta);border-radius:4px;padding:4px 10px;white-space:nowrap}.heroPreviewCard{pointer-events:auto;flex:1 1 0;min-width:min(400px,90vw);max-width:860px;width:auto;max-width:100%;min-width:0;min-height:0;height:auto;max-height:calc(100dvh - clamp(40px,6vh,72px));display:flex;flex-direction:column;overflow:hidden;background:#0a0a16f5;border:1px solid var(--line);border-left:2px solid rgba(0,232,255,.3);border-radius:16px;padding:clamp(12px,1.5vw,18px);box-shadow:0 24px 64px #0009,-4px 0 32px #00e8ff0f;box-sizing:border-box}.heroPreviewGrid{flex:1 1 auto;min-height:0;height:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;gap:clamp(8px,1vw,10px);overflow:hidden}.heroPlayIntro{display:none;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:0}.heroPlayIntroGifWrap{display:inline-block;line-height:0;max-width:min(100%,272px);border-radius:10px;border:1px solid var(--line);overflow:hidden}.heroPlayIntroGif{display:block;width:100%;height:auto;vertical-align:top;image-rendering:pixelated;image-rendering:crisp-edges}.heroPlayHighlights{margin:0;padding:0;list-style:none;font-size:13px;color:var(--dim);line-height:1.55;max-width:30ch}.heroPlayHighlights li{margin-bottom:6px}.heroPlayHighlights li:last-child{margin-bottom:0}.heroPlayHighlights strong{color:var(--txt)}.heroPlayStart{width:auto;max-width:100%;align-self:center;justify-content:center;margin-top:4px}.heroPlayRow{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0}.heroPlayToolbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;overflow:hidden}.heroPlayToolbar .heroPreviewLabel{margin:0}.heroPlayToolbar .seg{flex-shrink:0}.heroViewSeg{flex:0 0 auto;width:100%}.heroPlayHint{font-size:11px;color:var(--dim)}.heroPlayHint--tap{display:none}.heroPlayHint kbd{font-family:var(--mono);font-size:10px;background:#ffffff0f;border:1px solid var(--line);border-radius:4px;padding:1px 5px}.heroPlayReadout{flex:1 1 auto;min-width:0;margin-left:auto;font-family:var(--mono);font-size:9px;color:#8b90a880;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heroPlayRow>.heroPlayReadout{flex:none;margin:0;padding:0 2px;font-size:10px;text-align:left;color:var(--dim)}@media (min-width: 961px){.heroPlayToolbar{flex-wrap:wrap;order:1}.heroViewSeg{order:2}.heroPlayCanvasWrap{order:3}.heroPlayRow>.heroPlayReadout{order:4}.heroPlayIntro{display:none!important}.heroPreviewGrid[hidden]{display:grid!important}}.heroPlayCanvasWrap{position:relative;width:100%;flex:1 1 0;min-height:min(280px,36vh);background:#03030a;border:1px solid var(--line);border-radius:10px;overflow:hidden}.heroPlayCanvasWrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}.heroPlayEmpty{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:16px;font-size:12px;color:var(--dim);text-align:center;pointer-events:none}.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.heroPickRow{grid-column:1 / -1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.heroRosterBlock{grid-column:1 / -1;min-height:0}.heroPreviewLabel{flex-shrink:0;margin:0 0 8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}.heroRosterGrid{flex:0 0 auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;overflow:hidden}.heroPickCard{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;height:64px;padding:4px;border-radius:8px;border:1px solid transparent;background:#ffffff05;color:var(--dim);cursor:pointer;font:inherit}.heroPickThumb{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}.heroPickThumb canvas{display:block;max-width:100%;max-height:44px;width:auto;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.heroPickName{flex-shrink:0;width:100%;font-family:var(--display);font-size:9px;font-weight:700;line-height:1.2;text-align:center;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.heroPickCard:hover{border-color:var(--line)}.heroPickCard.on{border-color:var(--cyan);background:#00e8ff14}.heroPickCard.on .heroPickName{color:var(--cyan)}.heroOverlay a,.heroOverlay button,.heroOverlay select,.heroOverlay input{pointer-events:auto}.heroCopy{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:none;text-align:left;border-left:2px solid var(--magenta);padding-left:clamp(16px,2vw,28px)}.heroCopy .lede{max-width:52ch;font-size:clamp(1.05rem,1.4vw,1.2rem)}.ledeRest{display:inline}@media (max-width: 960px){#hero-wall{display:none}.heroLanding{min-height:auto;overflow:visible}.heroOverlay{position:relative;inset:auto;min-height:0;background:radial-gradient(ellipse 120% 80% at 50% -10%,rgba(255,45,138,.14),transparent 55%),radial-gradient(ellipse 90% 60% at 80% 40%,rgba(0,232,255,.1),transparent 50%),linear-gradient(to bottom,#05050c,#05050cf5 55%,#05050ce0)}.heroOverlayInner{flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;min-height:0;max-height:none;overflow:visible;gap:20px;padding:clamp(20px,4vh,32px) clamp(16px,4vw,24px) clamp(28px,5vh,40px)}.heroOverlayPanel,.heroCopy{display:contents}.heroCopyMain{order:1;border-left:none;padding-left:0;text-align:center}.heroCopyMain .heroTitleBrand{font-size:clamp(1.85rem,8vw,2.35rem)}.heroTitleSub{width:100%;max-width:100%;align-items:center}.heroTitleTag{white-space:normal;font-size:clamp(1.1rem,4.8vw,1.45rem)}.heroMeta{flex-wrap:wrap;justify-content:center;width:100%;min-width:0}.heroMetaPill{flex:0 1 auto;min-width:0;font-size:clamp(.62rem,2.8vw,.78rem);padding:5px 8px}.heroCopyMain .lede{font-size:.98rem;margin:12px auto 0;text-align:center}.ledeRest{display:none}.heroPreviewCard{order:2;flex:none;width:100%;border-left-width:2px;border-left-color:#ff2d8a59;box-shadow:0 24px 64px #0000008c,0 0 48px #00e8ff14,0 0 24px #ff2d8a0f;animation:heroCardGlow 5s ease-in-out infinite alternate;--hero-play-body-h: calc(206px + min(260px, 38dvh)) ;--hero-play-card-h: calc(var(--hero-play-body-h) + 24px);min-height:var(--hero-play-card-h);max-height:var(--hero-play-card-h);height:var(--hero-play-card-h);display:grid;grid-template-rows:1fr;overflow:hidden}.heroPlayIntro,.heroPreviewGrid{grid-row:1;grid-column:1;min-height:var(--hero-play-body-h);max-height:var(--hero-play-body-h);height:var(--hero-play-body-h);overflow:hidden}.heroPlayIntro{display:flex;justify-content:center;gap:8px}.heroPlayIntro[hidden],.heroPreviewGrid[hidden]{display:none!important}.heroPlayIntroGifWrap{max-width:min(100%,256px)}.heroPlayIntroGif{width:100%;height:auto}.heroPlayHighlights{font-size:12px;line-height:1.45}.heroPreviewGrid:not([hidden]){display:grid;overflow-y:auto;-webkit-overflow-scrolling:touch}.heroActions{order:3;flex-direction:column;align-items:stretch;gap:10px;width:100%;margin:4px 0 0}.heroActions .btn{justify-content:center;width:100%;padding:14px 18px}.heroPlayCanvasWrap{min-height:200px;height:min(260px,38dvh);flex:none}.heroPlayHint--keys{display:none}.heroPlayHint--tap{display:inline}.heroPlayCanvasWrap canvas{touch-action:none}.heroPlayRow{gap:10px}.heroPlayToolbar{order:1}.heroPlayCanvasWrap{order:2}.heroPlayReadout{order:3}.heroViewSeg{order:4;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}.heroViewSeg::-webkit-scrollbar{display:none}.heroViewSeg button{flex:0 0 auto;min-width:3.6rem;min-height:44px;font-size:12px;padding:10px 12px}.heroRosterBlock .heroPreviewLabel{margin-bottom:8px}.heroRosterGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;overflow:visible}.heroPickCard{width:auto;min-height:52px;height:auto;flex:none;padding:4px 2px}.heroPickThumb canvas{max-height:44px}}@keyframes heroCardGlow{0%{box-shadow:0 24px 64px #0000008c,0 0 36px #00e8ff0f,0 0 16px #ff2d8a0a}to{box-shadow:0 24px 64px #0000008c,0 0 52px #00e8ff1f,0 0 28px #ff2d8a1a}}a{color:var(--cyan)}.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px clamp(20px,3vw,40px);border-bottom:1px solid var(--line);background:#05050cd1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.logo{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.12em;text-decoration:none;color:var(--txt)}.logo span{color:var(--cyan)}.topNav{display:flex;gap:4px;flex-wrap:wrap;flex:1}.topNav a{padding:8px 12px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;color:var(--dim)}.topNav a:hover{color:var(--txt);background:var(--panel)}.topNav .navCta{color:var(--bg);background:linear-gradient(135deg,var(--cyan),var(--violet))}.topNav .navCta:hover{color:var(--bg);filter:brightness(1.08)}.topLink{font-size:12px;font-family:var(--mono);text-decoration:none;white-space:nowrap}.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin:0 0 10px}.lede{font-size:1rem;color:var(--dim);max-width:52ch;margin:16px 0 20px}.lede strong{color:var(--txt)}.heroActions{display:flex;gap:10px;flex-wrap:wrap;margin:0}.btn{display:inline-flex;align-items:center;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit}.btn.primary{background:linear-gradient(135deg,var(--magenta),#a01050);color:#fff;border:none}.btn.ghost{background:transparent;border-color:var(--line);color:var(--txt)}.btn.primary:hover{filter:brightness(1.1)}.btn.secondary{background:transparent;border-color:var(--magenta);color:var(--magenta)}.btn.secondary:hover{background:#ff2d8a1a}.btn.heroPlayStart{border-radius:999px;padding:10px 22px;white-space:nowrap}.btn .price-badge{margin-left:8px;font-size:11px;font-weight:400;font-family:var(--mono);opacity:.7}.btn.ghost:hover{border-color:var(--cyan)}section{margin-bottom:72px}.sectionHead{margin-bottom:24px}.sectionHead h2{font-family:var(--display);font-size:1.75rem;font-weight:700;margin:0 0 8px}.sectionHead p{margin:0;color:var(--dim);max-width:60ch}.sectionHead kbd,kbd{font-family:var(--mono);font-size:11px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:2px 6px}.demoLayout{display:grid;grid-template-columns:240px 1fr;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}@media (max-width: 720px){.demoLayout{grid-template-columns:1fr}}.fieldLabel{display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);margin:12px 0 6px}.fieldLabel:first-child{margin-top:0}.fieldLabel span{color:var(--cyan);font-family:var(--mono)}select,input[type=range]{width:100%;accent-color:var(--cyan)}select{background:var(--bg2);border:1px solid var(--line);color:var(--txt);padding:10px;border-radius:8px;font-size:13px}.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.seg.camviewSeg{flex-wrap:wrap}.seg.camviewSeg button{flex:1 1 18%;min-width:3.2em;font-size:11px;padding:8px 4px}.heroPlayToolbar .seg.camviewSeg button{font-size:10px;padding:6px 3px}.seg button{flex:1;border:none;background:transparent;color:var(--dim);padding:10px 8px;font-size:12px;font-weight:600;cursor:pointer}.seg button.on{background:var(--cyan);color:#04121a}.demoMeta{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.7}.demoMeta b{color:var(--cyan)}#demo-canvas{width:100%;height:auto;display:block;border-radius:12px;background:#06060e;border:1px solid var(--line);image-rendering:pixelated;image-rendering:crisp-edges}.demoHint{font-size:12px;color:var(--dim);margin:10px 0 0}.rosterGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.rosterCard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer;transition:border-color .15s,transform .15s;text-align:center}.rosterCard:hover,.rosterCard.on{border-color:var(--cyan);transform:translateY(-2px)}.rosterCard.hero{border-color:#ff2d8a59}.rosterCard .thumb{height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}.rosterCard canvas{image-rendering:pixelated;image-rendering:crisp-edges}.rosterCard .name{font-weight:700;font-size:13px;margin:0 0 2px}.rosterCard .seed{font-family:var(--mono);font-size:10px;color:var(--dim)}.rosterCard .tier{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--magenta);margin-top:4px}.atlasLayout{display:grid;grid-template-columns:1fr minmax(200px,320px);gap:16px}@media (max-width: 820px){.atlasLayout{grid-template-columns:1fr}}.atlasFrame{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto;max-height:420px}.atlasFrame img{display:block;max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}.atlasJson{margin:0;padding:14px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--dim);overflow:auto;max-height:420px}.codeGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}.codeCard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}.codeCard h3{margin:0 0 10px;font-size:13px;font-weight:700}.codeCard pre{margin:0;overflow-x:auto}.codeCard code{font-family:var(--mono);font-size:11px;color:#b8bdd4;line-height:1.55}.buyCard{background:linear-gradient(145deg,#12122a,var(--panel));border:1px solid var(--line);border-radius:20px;padding:32px}.buyCard h2{font-family:var(--display);margin:0 0 16px}.buyList{margin:0 0 16px;padding-left:20px;color:var(--dim)}.buyList li{margin-bottom:8px}.buyNote{color:var(--dim);font-size:14px}.buyActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.foot{display:flex;gap:16px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}.foot a{text-decoration:none}.seoBlock{margin-top:48px;padding-top:8px}.seoBlock:first-child{margin-top:0;border-top:none;padding-top:0}.seoBlock+.seoBlock{border-top:1px solid var(--line);padding-top:16px}.seoBlock .declarative{font-size:15px;line-height:1.65;color:var(--txt);margin:0 0 28px;max-width:72ch}.seoSubhead{font-family:var(--display);font-size:1.1rem;margin:28px 0 12px;color:var(--cyan)}.seoList{margin:0 0 20px;padding-left:20px;color:var(--dim);max-width:72ch}.seoList li{margin-bottom:8px}.seoList strong{color:var(--txt)}.specTable{width:100%;max-width:640px;border-collapse:collapse;margin:0 0 24px;font-size:14px}.specTable th,.specTable td{border:1px solid var(--line);padding:10px 14px;text-align:left}.specTable thead th{background:var(--panel);color:var(--cyan);font-weight:700}.specTable tbody th{background:var(--bg2);color:var(--txt);font-weight:600;width:38%}.specTable td{color:var(--dim)}.seoFigure{margin:28px 0 0;max-width:420px}.seoFigure img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);image-rendering:pixelated;image-rendering:crisp-edges}.seoFigure figcaption{margin-top:10px;font-size:13px;color:var(--dim)}#faq h3{font-size:1rem;margin:24px 0 8px;color:var(--txt)}#faq p{margin:0 0 8px;color:var(--dim);max-width:72ch;font-size:15px;line-height:1.6}@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.rosterCard{transition:none}.heroPreviewCard{animation:none}}
