/* Page tokens: see DESIGN-site-gameforward.md. Single deliberate dark theme (a game-menu world). */
:root{
  color-scheme:dark;
  --ground:#0A2229;--band:#0F3743;--panel:#16414D;--panel-2:#1C4E5C;--panel-2-hover:#23606F;--sunken:#061A20;--line:#2F7185;
  --ink:#031015;--extrude:#2A8C9A;--text:#EAF5F3;--muted:#A3C4C6;--display:#FFFFFF;--placeholder:#7C9EA3;--code-cmd:#7FD6E2;--on-toggle-muted:#35545A;--us-cell:#1E5763;
  --cta:#FF3D7F;--cta-hover:#FF5C94;--cta-press:#EC2B6C;--cta-lip:#B3124F;--on-cta:#2B0414;
  --pass:#3FE0A5;--warn:#FFB547;
  /* Loot-table colours, shared with Candy Night on purpose (rarity frames, the coin pill); never large fills */
  --r-common:#9AA3B8;--r-rare:#4DA8FF;--r-epic:#B07CFF;--r-legendary:#FF9F1C;--coin:#FFC93C;
  --lip:inset 0 2px 0 rgb(255 255 255/.05),0 3px 0 var(--ink);
  --f-display:"Lilita One","Arial Black",Impact,system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Atkinson Hyperlegible Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --f-cn-display:"Fredoka","Arial Rounded MT Bold","Segoe UI",system-ui,sans-serif;
  --f-cn-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --t-hero:clamp(2.5rem,1.4rem + 4.6vw,4.625rem);
  --t-h2:clamp(2rem,1.45rem + 2.3vw,3.125rem);
  --t-h3:1.375rem;--t-lede:1.1875rem;--t-body:1.0625rem;--t-small:.9375rem;--t-mono:.875rem;--t-label:.8125rem;
  --gutter:clamp(16px,4vw,40px);
  --r-panel:12px;--r-card:18px;--r-btn:14px;
}
@media (max-width:560px){:root{--t-small:1rem}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html.locked{overflow:hidden}
body{margin:0;background:var(--ground);color:var(--text);font:400 var(--t-body)/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.page{padding-inline:var(--gutter)}
.wrap{max-width:1180px;margin-inline:auto}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text);text-decoration-color:var(--extrude);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--text)}
a:not([href]){color:var(--muted);text-decoration:none}
code,.mono{font-family:var(--f-mono);font-size:var(--t-mono)}
p code{font-size:.9em}
:focus-visible{outline:3px solid var(--cta);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section{scroll-margin-top:5rem}

/* Chunky display type: white fill, teal extrusion, ink drop (no outline: it vanished on the dark ground) */
.chunk{color:var(--display);text-shadow:0 .06em 0 var(--extrude),0 .12em 0 var(--ink)}
.h1{font-size:var(--t-hero);line-height:1.04;letter-spacing:.005em}
.h1 .line{display:block}
.h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:.005em}
h3{font-size:var(--t-h3);line-height:1.15}
.eyebrow{font:700 var(--t-label)/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:var(--t-lede);color:var(--muted);max-width:62ch}
.lede strong{color:var(--text);font-weight:600}
.small{font-size:var(--t-small);color:var(--muted)}

/* Bands: full-bleed backgrounds without horizontal overflow */
.band{background:var(--band);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.sec{padding-block:clamp(3.5rem,7vw,6rem)}
.sec-head{display:grid;gap:1rem;max-width:66ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* Panels are separated by their edges: a line colour and a lip, not by fill alone */
.pack:not(.locked),.tile,.facts li,.drives li,.ab,.vcard,.req,.founder,.faq details,.signup-panel,.same-box,.worse-box,.cmp,.table-small{box-shadow:var(--lip)}

/* Buttons: one saturated CTA with a lip, one quiet plain button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3.25rem;padding:.55em 1.3em .75em;border:3px solid var(--ink);border-radius:var(--r-btn);font:400 1.1875rem/1 var(--f-display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .1s,background-color .15s,box-shadow .1s}
.btn-cta{background:var(--cta);color:var(--on-cta);box-shadow:inset 0 3px 0 rgb(255 255 255/.35),inset 0 -5px 0 var(--cta-lip),0 3px 0 var(--ink)}
.btn-cta:hover{background:var(--cta-hover)}
.btn-cta:active{background:var(--cta-press);transform:translateY(2px);box-shadow:inset 0 3px 0 rgb(255 255 255/.3),inset 0 -2px 0 var(--cta-lip),0 1px 0 var(--ink)}
.btn-plain{background:var(--panel-2);color:var(--text);box-shadow:inset 0 -4px 0 rgb(0 0 0/.28)}
.btn-plain:hover{background:var(--panel-2-hover)}
.btn-plain:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgb(0 0 0/.28)}
.btn:disabled{background:var(--panel-2);color:var(--muted);box-shadow:none;cursor:not-allowed;transform:none}
.btn-sm{min-height:2.5rem;font-size:1rem;padding:.45em .95em .6em;border-width:2px}

/* Stamps and ribbons */
.stamp{display:inline-block;justify-self:start;align-self:start;font:400 .875rem/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;padding:.4em .65em .45em;border:2px solid currentColor;border-radius:8px;transform:rotate(-3deg);white-space:nowrap}
.stamp.ok{color:var(--pass)}.stamp.warn{color:var(--warn)}.stamp.soon{color:var(--muted);border-style:dashed}
.stamp small{display:block;font-size:.62em;letter-spacing:.14em;margin-top:.3em}
.stamp.sm{font-size:.75rem;transform:none}
.stamp.big{font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);border-width:3px;border-radius:12px;padding:.4em .6em .45em}
.stamp.date{color:var(--text)}
.stamp.slam{animation:slam .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes slam{from{transform:rotate(-3deg) scale(1.5);opacity:.2}to{transform:rotate(-3deg) scale(1);opacity:1}}
.rib{display:inline-block;font:400 var(--t-label)/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--rc,var(--r-common));padding:.4em .6em .45em;border-radius:6px}
.tag{display:inline-block;font:600 .75rem/1.2 var(--f-body);letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:.25em .6em}
.example-flag{display:inline-block;font:700 .6875rem/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--warn);border-radius:4px;padding:.3em .45em}

/* Top HUD bar */
.hud{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--ground);box-shadow:0 0 0 100vmax var(--ground);clip-path:inset(0 -100vmax -2px);border-bottom:2px solid var(--panel)}
.hud-in{display:flex;align-items:center;gap:1rem;min-height:4rem;padding-block:.5rem}
.logo{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--text);font:400 1.375rem/1 var(--f-display);white-space:nowrap}
.logo small{font:600 .8125rem/1 var(--f-body);color:var(--muted);letter-spacing:.02em}
.mark .a{fill:var(--extrude)}.mark .b{fill:var(--display);opacity:.3}.mark .o{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.nav{display:flex;gap:1.25rem;margin-inline:auto;font:600 var(--t-small)/1 var(--f-body)}
.nav a{text-decoration:none;color:var(--muted)}
.nav a:hover{color:var(--text)}
.hud .btn{margin-left:auto}
@media (max-width:900px){.nav{display:none}}
@media (max-width:420px){.logo small{display:none}}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,5rem)}
.hero-copy{display:grid;gap:1.4rem}
.loadout{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.loadout li{display:flex;align-items:baseline;gap:.4rem;background:var(--panel);border-radius:10px;padding:.45rem .75rem;font:600 var(--t-small)/1.2 var(--f-body);color:var(--muted)}
.loadout b{font:400 1.375rem/1 var(--f-display);color:var(--text);font-variant-numeric:tabular-nums}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.note{font-size:var(--t-small);color:var(--muted)}
.note strong{color:var(--text)}
.fine{font:600 var(--t-small)/1.5 var(--f-body);color:var(--muted);letter-spacing:.01em}
.kit{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--t-small);color:var(--muted)}
.kit a{font-weight:700}

/* Game-panel frame around the hero stage or footage */
.gameframe{position:relative;background:var(--panel-2);border:3px solid var(--ink);border-radius:22px;padding:14px;box-shadow:0 6px 0 var(--ink);display:grid;gap:12px;margin-top:14px}
.plate{position:absolute;top:-16px;left:18px;z-index:3;font:400 1rem/1 var(--f-display);letter-spacing:.04em;background:var(--ground);color:var(--text);border:3px solid var(--ink);border-radius:10px;padding:.45em .7em .5em}
.hero-stage{display:grid;gap:.75rem}
.gameframe .bezel{border-radius:12px}
/* Says what the footage is, right under it */
.clip-label{display:flex;align-items:center;gap:.5rem;font:600 var(--t-small)/1.3 var(--f-body);color:var(--muted)}
.clip-label::before{content:"";flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--pass);box-shadow:0 0 0 3px rgb(63 224 165/.2)}
.clip-label b{color:var(--text)}
/* Pause/play for looping footage that autoplays */
.clip-toggle{position:absolute;right:8px;bottom:8px;z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;border:2px solid rgb(234 245 243/.55);border-radius:50%;background:rgb(3 16 21/.72);color:var(--text);cursor:pointer}
.clip-toggle:hover{background:rgb(3 16 21/.92)}
.clip-toggle svg{width:16px;height:16px}
.clip-tag{position:absolute;left:8px;bottom:8px;z-index:1;font:400 .75rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--pass);border:2px solid var(--ink);border-radius:7px;padding:.35em .55em .4em}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.chip{font:600 var(--t-small)/1 var(--f-body);color:var(--text);background:var(--panel);border:2px solid var(--line);border-radius:999px;padding:.55em .9em;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--text);color:var(--ink);border-color:var(--text)}

/* Footage slot: a real <video>/<img> with a designed poster until the clip exists */
.clip{position:relative;margin:0;aspect-ratio:16/9;max-width:100%;border-radius:10px;overflow:hidden;background:var(--sunken)}
.clip.portrait{aspect-ratio:9/16;max-height:78vh}
.clip video,.clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip.ready .poster{display:none}
.poster{position:absolute;inset:0;overflow:hidden;display:grid;align-content:space-between;gap:.5rem;padding:clamp(.75rem,2.5vw,1.1rem);background:repeating-linear-gradient(135deg,rgb(234 245 243/.035) 0 10px,transparent 10px 20px),var(--sunken)}
.poster::after{content:"";position:absolute;inset:8px;pointer-events:none;--c:rgb(234 245 243/.4);background:
  linear-gradient(var(--c),var(--c)) 0 0/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 16px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 16px no-repeat}
.cid{display:flex;align-items:center;gap:.5rem;font:400 clamp(1.05rem,2.4vw,1.35rem)/1 var(--f-display);color:var(--text)}
.cid::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--muted);box-shadow:0 0 0 3px rgb(163 196 198/.2)}
.cdesc{font:400 var(--t-mono)/1.45 var(--f-mono);color:var(--text);max-width:48ch}
.cmeta{font:400 .75rem/1.3 var(--f-mono);color:var(--muted)}
.clip.sm .cid{font-size:1rem}
.clip.sm .cdesc{font-size:.75rem;line-height:1.4}
.ab:not(.legendary) .clip{aspect-ratio:4/3}
@media (max-width:560px){
  .cmeta{display:none}
  .cdesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* Pick a style */
.packs{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.pack{position:relative;display:grid;gap:.6rem;align-content:start;background:var(--panel);border:3px solid transparent;border-radius:var(--r-card);padding:1rem}
.pack.on{border-color:var(--text)}
.pack.locked{background:transparent;border:3px dashed var(--line)}
.pack .genres{font-size:var(--t-small);color:var(--muted);line-height:1.45}
.pack .lock{position:absolute;top:.9rem;right:.9rem;width:1.25rem;height:1.25rem;color:var(--muted)}
.swatch{height:4.25rem;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem;overflow:hidden}
.sw-cn{background:#231C57;box-shadow:inset 0 0 0 3px #7A68E0}
.sw-cn .b{font:600 1.05rem/1 var(--f-cn-display);color:#10290A;background:linear-gradient(rgb(255 255 255/0),rgb(0 0 0/.16)) #8BE22B;border:2px solid #1D4508;border-radius:8px;padding:.35em .8em;box-shadow:0 3px 0 #4E9A12}
.sw-cn .p{font:600 .95rem/1 var(--f-cn-display);color:#FFC93C;background:#1A1545;border-radius:999px;padding:.35em .7em}
.sw-ah{background:#28332E}
.sw-ah .b{font:700 .9rem/1 var(--f-body);letter-spacing:.14em;color:#E9ECE4;border:2px solid #E9ECE4;padding:.4em .7em;background:rgb(233 236 228/.06)}
.sw-ah .d{width:.7rem;height:.7rem;border-radius:50%;background:#E0342C}
.sw-ns{background:#140B24;box-shadow:inset 0 0 0 2px #B07CFF,inset 0 0 18px rgb(176 124 255/.45)}
.sw-ns .b{font:700 italic 1rem/1 var(--f-body);color:#fff;background:linear-gradient(90deg,#FF4FD8,#7A5CFF);padding:.4em .75em;border-radius:6px;transform:skewX(-8deg)}
.sw-ag{background:linear-gradient(135deg,#6F8FA8,#B9C9D6 55%,#8BA3B6)}
.sw-ag .b{font:700 .9rem/1 var(--f-body);color:#0F1A22;background:rgb(255 255 255/.55);border:1px solid rgb(255 255 255/.8);border-radius:8px;padding:.45em .8em}
.sw-ag .t{width:1.6rem;height:.35rem;border-radius:2px;background:#FFD23A}
.locked .swatch{filter:saturate(.55) brightness(.8)}
.packs-note{font-size:var(--t-small);color:var(--muted);margin-bottom:2rem;max-width:70ch}

.stage{display:grid;gap:1.25rem}
.stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem}
.seg{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.seg-label{font:700 var(--t-label)/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:.35rem}
.segb{display:inline-grid;gap:.15rem;justify-items:start;background:var(--panel);color:var(--text);border:2px solid var(--line);border-radius:10px;padding:.45rem .7rem;cursor:pointer;font:600 var(--t-small)/1.1 var(--f-body)}
.segb code{font-size:.8125rem;font-weight:600}
.segb small{font:400 .75rem/1 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.segb[aria-pressed="true"]{background:var(--text);color:var(--ink);border-color:var(--text)}
.segb[aria-pressed="true"] small{color:var(--on-toggle-muted)}
.stage-hint{font-size:var(--t-small);color:var(--muted)}
.stage-body{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;align-items:start}
.bezel{position:relative;background:var(--ink);border-radius:18px;padding:clamp(8px,1.5vw,14px);display:grid;place-items:center}
.illo-chip{position:absolute;top:-.75rem;right:.9rem;z-index:2;font:400 .75rem/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--text);border:2px solid var(--ink);border-radius:7px;padding:.35em .55em .4em;transform:rotate(2deg);pointer-events:none}
.illo-chip.real{background:var(--pass)}
.illo-note{margin-top:.75rem;font-size:var(--t-small);color:var(--muted);max-width:75ch}
/* A real Studio still above the interactive illustration */
.cap-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:1.25rem 2rem;align-items:center;margin-bottom:2.5rem}
.cap-row figure{margin:0}
.cap-img{display:block;width:100%;height:auto;border-radius:4px}
.cap-copy{display:grid;gap:.6rem;align-content:start}
@media (max-width:760px){.cap-row{grid-template-columns:minmax(0,1fr)}}
.illo-note b{color:var(--text);font-weight:700}
.captures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.25rem}
.captures figure{margin:0}
.captures figcaption{font-size:var(--t-small);color:var(--muted);margin-top:.5rem}
@media (max-width:1100px){.packs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Phones: a stage opens as a rotated full-screen overlay (the bezel moves to document.body while open) */
.land-btn{display:none;justify-self:start}
.land-btn svg{width:1.25em;height:1.25em}
.land-close{display:none;position:absolute;top:10px;right:6px;z-index:3;width:44px;height:44px;place-items:center;padding:0;border:2px solid var(--ink);border-radius:12px;background:var(--text);color:var(--ink);cursor:pointer}
.land-close svg{width:20px;height:20px}
.bezel.landscape{position:fixed;top:0;left:0;z-index:100;margin:0;width:100vh;width:100dvh;height:100vw;height:100dvw;border-radius:0;padding:10px 56px 10px 10px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}
.bezel.landscape .cn-screen{width:min(100%,calc((100vw - 20px) * var(--ar)));width:min(100%,calc((100dvw - 20px) * var(--ar)))}
.bezel.landscape .land-close{display:grid}
.bezel.landscape .illo-chip{top:auto;bottom:14px;right:auto;left:14px;transform:none}
@media (max-width:640px){
  .land-btn{display:inline-flex}
  .packs,.captures{grid-template-columns:minmax(0,1fr)}
  .pack.locked{grid-template-columns:6.5rem minmax(0,1fr);gap:.3rem .9rem;align-items:center;padding:.75rem}
  .pack.locked .swatch{grid-row:1/span 3;height:100%;min-height:4rem}
  .pack.locked .swatch .b{font-size:.7rem}
  .pack.locked>:not(.swatch){grid-column:2}
  .pack.locked h3{font-size:1.125rem;padding-right:1.75rem}
  .pack.locked .lock{top:.75rem;right:.75rem}
  .stage .bezel{margin-inline:calc(-1*var(--gutter));border-radius:0}
  .gameframe{margin-inline:calc(-1*var(--gutter));border-radius:0;border-inline-width:0}
  .gameframe .plate{left:var(--gutter)}
  .gameframe .bezel{border-radius:8px}
  .gameframe .bezel:not(.landscape) .illo-chip{top:auto;bottom:-.7rem}
}

/* ===== Candy Night illustration: exact tokens from presets/candy-night/DESIGN.md =====
   Sizes are Roblox px scaled by --u (CSS px per device px) and Scale values of the panel (--PW, --PH). */
.cn{--cn-backdrop:#16123A;--cn-surface:#231C57;--cn-raised:#33297A;--cn-raised-hover:#3D3290;--cn-sunken:#1A1545;--cn-rim:#7A68E0;--cn-outline:#0B0820;--cn-header:#5A49C8;
  --cn-on:#FFFFFF;--cn-on-muted:#C9C3F0;--cn-primary:#8BE22B;--cn-primary-hover:#A1EE45;--cn-primary-pressed:#74C81C;--cn-primary-lip:#4E9A12;--cn-primary-outline:#1D4508;--cn-on-primary:#10290A;
  --cn-secondary:#FFC93C;--cn-secondary-hover:#FFD45E;--cn-secondary-lip:#C77700;--cn-secondary-outline:#5A3300;--cn-on-secondary:#3A2400;
  --cn-error:#D42F48;--cn-error-hover:#DA3550;--cn-error-pressed:#B8243A;--cn-error-outline:#4A0A16;--cn-disabled:#463F6B;--cn-on-disabled:#C9C3F0;
  --cn-common:#9AA3B8;--cn-rare:#4DA8FF;--cn-epic:#B07CFF;--cn-legendary:#FF9F1C}
.cn-screen{--dw:640;--ar:1.7778;--pw:.82;--ph:.88;--cols:3;
  --px-display:28;--px-title:18;--px-amount:18;--px-caption:14;--px-tab:16;--px-price:14;--px-buy:18;--px-badge:14;--px-ts:2;--px-ts2:2;
  --u:calc(100cqw / var(--dw));
  --PW:min(calc(var(--pw) * 100cqw),calc(var(--ph) * 165cqh));
  --PH:calc(var(--PW) / 1.65);
  container-type:size;position:relative;overflow:hidden;width:min(100%,calc(30rem * var(--ar)));max-width:100%;aspect-ratio:var(--ar);border-radius:4px;font-family:var(--f-cn-body);color:var(--cn-on);transition:width .35s ease}
.cn-world{position:absolute;inset:0;background:
  radial-gradient(60% 40% at 18% 100%,#79C95A 0 99%,transparent 100%),radial-gradient(70% 45% at 88% 104%,#5FB548 0 99%,transparent 100%),
  radial-gradient(7cqmin 7cqmin at 84% 16%,#FFF3B0 0 97%,transparent 100%),linear-gradient(#6FC3F2,#BDE7FB 62%,#9AD97A 62.2%,#78C45B)}
.cn-backdrop{position:absolute;inset:0;background:rgb(22 18 58/.65)}
.cn-st{--s:calc(var(--sw,var(--px-ts)) * var(--u));--d:calc(var(--sw,var(--px-ts)) * var(--u) * .7);text-shadow:
  var(--s) 0 0 var(--cn-outline),calc(var(--s) * -1) 0 0 var(--cn-outline),0 var(--s) 0 var(--cn-outline),0 calc(var(--s) * -1) 0 var(--cn-outline),
  var(--d) var(--d) 0 var(--cn-outline),calc(var(--d) * -1) var(--d) 0 var(--cn-outline),var(--d) calc(var(--d) * -1) 0 var(--cn-outline),calc(var(--d) * -1) calc(var(--d) * -1) 0 var(--cn-outline)}
.cn-shade{background-image:linear-gradient(rgb(255 255 255/0),rgb(0 0 0/.16))}
/* The HUD always fits in the gaps beside the open panel */
.cn-hudleft{position:absolute;left:2%;top:45%;translate:0 -50%;width:min(22%,calc((100cqw - var(--PW)) / 2 - 3cqw));height:30%;display:flex;flex-direction:column;gap:4%}
.cn-pill{height:30%;display:flex;align-items:center;gap:6%;padding:0 12% 0 3%;background:rgb(26 21 69/.85);border:calc(.72cqh) solid var(--cn-outline);border-radius:999px;font:600 calc(var(--px-amount) * var(--u))/1 var(--f-cn-display);--sw:var(--px-ts2)}
.cn-cur{flex:none;height:115%;width:auto;margin-left:-7%;pointer-events:none}
.cn-rewards{position:absolute;right:2%;bottom:38%;width:min(16%,calc((100cqw - var(--PW)) / 2 - 3cqw));height:14%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:1.5cqh;background-color:var(--cn-secondary);border:calc(.9cqh) solid var(--cn-secondary-outline);border-radius:calc(4cqh);box-shadow:0 calc(5 * var(--u)) 0 var(--cn-secondary-lip);color:var(--cn-on-secondary);font:600 calc(var(--px-buy) * var(--u))/1 var(--f-cn-display)}
.cn-gift{position:absolute;left:50%;top:-20%;translate:-50% 0;height:72%;width:auto;pointer-events:none}
.cn-badge{position:absolute;left:95%;top:5%;translate:-50% -50%;height:40%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--cn-error);border:calc(.45cqh) solid var(--cn-outline);color:#fff;font:600 calc(var(--px-badge) * var(--u))/1 var(--f-cn-display)}
/* Compact and Regular screens (data-k 0 and 1): the gaps beside the panel are too narrow for labels,
   so the HUD shrinks to its icons, the gift and its badge. Roomy screens keep the labels. */
.cn-screen:not([data-k="2"]) .cn-pill{padding:0;justify-content:center;background:none;border:0}
.cn-screen:not([data-k="2"]) .cn-pill .cn-st,.cn-screen:not([data-k="2"]) .cn-rw{display:none}
.cn-screen:not([data-k="2"]) .cn-cur{margin:0}
.cn-screen:not([data-k="2"]) .cn-rewards{background:none;border:0;box-shadow:none;padding:0}
.cn-screen:not([data-k="2"]) .cn-gift{top:50%;translate:-50% -50%;width:130%;height:auto}
.cn-panel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--PW);height:var(--PH);background:var(--cn-surface);border:calc(var(--PH) * .012) solid var(--cn-rim);border-radius:calc(var(--PH) * .06);
  padding:calc(var(--PH) * .03) calc(var(--PW) * .04);display:grid;grid-template-rows:15fr 15fr 62fr;row-gap:calc(var(--PH) * .028);transition:top .3s cubic-bezier(.34,1.56,.64,1)}
.cn-panel.closed{top:150%}
.cn-panel>*{min-height:0;min-width:0}
.cn-header{position:relative;display:flex;align-items:center;padding-left:4%;background-color:var(--cn-header);border:calc(var(--PH) * .0047) solid var(--cn-outline);border-radius:calc(var(--PH) * .0156)}
.cn-display{font:600 calc(var(--px-display) * var(--u))/1 var(--f-cn-display);letter-spacing:.01em}
.cn-close{position:absolute;right:-2%;top:50%;translate:0 -50%;height:115%;aspect-ratio:1;padding:0;display:grid;place-items:center;cursor:pointer;background-color:var(--cn-error);border:calc(var(--PH) * .0096) solid var(--cn-error-outline);border-radius:calc(var(--PH) * .018);transition:background-color .1s,scale .1s}
.cn-close:hover{background-color:var(--cn-error-hover)}.cn-close:active{background-color:var(--cn-error-pressed);scale:.94}
.cn-close svg{width:52%;height:52%}
.cn-tabs{display:flex;gap:2%}
.cn-tab{width:22%;height:100%;padding:0;cursor:pointer;font:600 calc(var(--px-tab) * var(--u))/1 var(--f-cn-display);color:var(--cn-on-muted);background:var(--cn-raised);border:calc(var(--PH) * .0083) solid var(--cn-outline);border-radius:calc(var(--PH) * .036);transition:background-color .12s,scale .12s}
.cn-tab:hover{background:var(--cn-raised-hover)}.cn-tab:active{scale:.94}
.cn-tab[aria-pressed="true"]{background:var(--cn-secondary);color:var(--cn-on-secondary);border-color:var(--cn-secondary-outline)}
.cn-tab[aria-pressed="true"]:hover{background:var(--cn-secondary-hover)}
.cn-content{display:grid;grid-template-columns:64fr 34fr;column-gap:calc(var(--PW) * .018)}
.cn-content>*{min-height:0;min-width:0}
.cn-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc(var(--PH) * .268);gap:calc(var(--PH) * .018) calc(var(--PW) * .012);overflow-y:auto;overflow-x:hidden;padding:calc(var(--PH) * .014);scrollbar-width:thin;scrollbar-color:var(--cn-rim) transparent}
.cn-card{--rc:var(--cn-common);position:relative;display:grid;grid-template-rows:62fr 28fr;row-gap:6%;justify-items:center;align-items:center;padding:6%;cursor:pointer;color:inherit;font:inherit;min-width:0;
  background:var(--cn-raised);border:calc(var(--PH) * .0099) solid var(--rc);border-radius:calc(var(--PH) * .033);transition:background-color .1s,scale .1s}
.cn-card.rare{--rc:var(--cn-rare)}.cn-card.epic{--rc:var(--cn-epic)}
.cn-card.legendary{--rc:var(--cn-legendary);box-shadow:0 0 calc(18 * var(--u)) rgb(255 159 28/.6)}
.cn-card:hover{background:var(--cn-raised-hover)}.cn-card:active{scale:.96}
.cn-card.selected{background:var(--cn-raised-hover);border-color:var(--cn-secondary)}
.cn-slot{position:relative;height:100%;aspect-ratio:1;background:var(--cn-sunken);border-radius:12%}
/* Preset item-icon size is 1.15 of the slot. The icon files carry about 10% transparent margin per side,
   so on cards they are drawn at 135% and the art itself pokes just past the slot's edge.
   The detail slot stays at 115% so its icon clears the name below it. */
.cn-slot>*,.cn-dslot>*{position:absolute;inset:-7.5%;width:115%;height:115%;max-width:none;overflow:visible;pointer-events:none}
.cn-slot>img{inset:-17.5%;width:135%;height:135%}
.cn-price{width:100%;height:100%;display:grid;place-items:center;background:var(--cn-sunken);border-radius:999px;color:var(--cn-secondary);font:600 calc(var(--px-price) * var(--u))/1 var(--f-cn-display);font-variant-numeric:tabular-nums}
.cn-detail{display:grid;grid-template-rows:43fr 13fr 8fr 28fr;row-gap:2%;justify-items:center;align-items:center;padding:7% 6% 9%;background:var(--cn-sunken);border:calc(var(--PH) * .014) solid var(--cn-rim);border-radius:calc(var(--PH) * .035)}
.cn-detail>*{min-height:0;min-width:0}
.cn-dslot{position:relative;height:100%;aspect-ratio:1;background:var(--cn-sunken)}
.cn-name{max-width:100%;padding-inline:4px;font:600 calc(var(--px-title) * var(--u))/1.1 var(--f-cn-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;--sw:var(--px-ts2)}
.cn-rarity{font:700 calc(var(--px-caption) * var(--u))/1.1 var(--f-cn-body);color:var(--cn-on-muted);white-space:nowrap}
.cn-buy{width:100%;height:100%;cursor:pointer;font:600 calc(var(--px-buy) * var(--u))/1 var(--f-cn-display);color:var(--cn-on-primary);background-color:var(--cn-primary);border:calc(var(--PH) * .0107) solid var(--cn-primary-outline);border-radius:calc(var(--PH) * .047);box-shadow:0 calc(5 * var(--u)) 0 var(--cn-primary-lip);transition:background-color .1s,scale .1s}
.cn-buy:hover{background-color:var(--cn-primary-hover)}.cn-buy:active{background-color:var(--cn-primary-pressed);scale:.94}
.cn-buy.owned,.cn-buy.owned:hover,.cn-buy.owned:active{background-color:var(--cn-disabled);background-image:none;color:var(--cn-on-disabled);box-shadow:none;cursor:default;scale:1}
.cn-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cn-bit{position:absolute;width:calc(11 * var(--u));height:calc(7 * var(--u));border-radius:2px;animation:cnpop 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cnpop{0%{transform:translate(0,0) rotate(0);opacity:1}45%{transform:translate(calc(var(--dx) * .6),var(--up)) rotate(calc(var(--rot) * .5));opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

/* ===== Fits every screen ===== */
.runbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;margin-bottom:1.25rem}
.strip{overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:.5rem}
.strip-cap{margin:.5rem 0 1.5rem}
.strip-cap b{color:var(--text)}
.screens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(8.75rem,1fr));gap:.75rem}
.tile{scroll-snap-align:start;background:var(--panel);border-radius:var(--r-panel);padding:.75rem;display:grid;gap:.6rem;align-content:start}
.bay{height:6.25rem;display:grid;place-items:center}
.mini{container-type:size;position:relative;width:min(100%,calc(6.25rem * var(--ar)));aspect-ratio:var(--ar);border-radius:4px;overflow:hidden;background:linear-gradient(#6FC3F2,#BDE7FB 62%,#78C45B 62.2%);box-shadow:0 0 0 2px var(--ink)}
.mini::before{content:"";position:absolute;inset:0;background:rgb(22 18 58/.65)}
.mini-panel{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(calc(var(--pw) * 100cqw),calc(var(--ph) * 165cqh));aspect-ratio:1.65;background:var(--cn-surface);border:max(1.5px,1.1cqh) solid var(--cn-rim);border-radius:6cqh}
.mini-panel::before{content:"";position:absolute;left:4%;right:4%;top:5%;height:15%;background:var(--cn-header);border-radius:2px}
.mini-panel::after{content:"";position:absolute;right:5%;bottom:8%;width:30%;height:17%;background:var(--cn-primary);border-radius:3px}
.mini-badge{position:absolute;right:4%;top:6%;min-width:1.35rem;height:1.35rem;display:grid;place-items:center;border-radius:999px;background:var(--warn);color:var(--ink);font:400 .8125rem/1 var(--f-display);border:2px solid var(--ink)}
.tile-meta{display:grid;gap:.1rem}
.tile-meta code{font-size:.8125rem;font-weight:600;color:var(--text)}
.tile-meta .dims{font:400 .8125rem/1.3 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.tile-meta .cls{font:600 .75rem/1.3 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.screens-foot .facts{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.facts li{background:var(--panel);border-radius:var(--r-panel);padding:.85rem 1rem;color:var(--muted);font-size:var(--t-small)}
.facts b{display:block;color:var(--text);font:400 1.0625rem/1.3 var(--f-display);margin-bottom:.2rem;letter-spacing:.01em}

/* ===== One style file ===== */
.file-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.file{background:var(--sunken);border-radius:var(--r-panel);overflow:hidden}
.file-tab{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem 1rem;background:var(--panel);font:400 .8125rem/1.3 var(--f-mono);color:var(--muted)}
.file-tab code{color:var(--text);font-size:.8125rem}
.file pre{margin:0;padding:1rem 1.15rem;overflow-x:auto;font:400 .8125rem/1.6 var(--f-mono);color:var(--text)}
.file .k{color:var(--muted)}.file .hd{color:var(--code-cmd)}
.drives{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.drives li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem 1rem;align-items:center;background:var(--panel);border-radius:var(--r-panel);padding:.8rem 1rem}
.drives .dt{font:400 1.125rem/1.2 var(--f-display);letter-spacing:.01em}
.drives code{grid-column:1/-1;color:var(--muted);font-size:.8125rem;overflow-wrap:anywhere}
.coming-head{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
/* While this band is hidden, its two unbanded neighbours meet: keep one gap between them, not two */
#style-file[hidden] + .sec{padding-top:0}

/* ===== Ability inventory ===== */
.legend{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.legend li{display:grid;gap:.4rem;align-content:start;font-size:var(--t-small);color:var(--muted);line-height:1.45}
.legend .rib{justify-self:start}
.inv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:1.25rem}
.ab{--rc:var(--r-common);display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"slot top" "slot title" "text text";gap:.8rem 1rem;align-content:start;align-items:center;background:var(--panel);border:3px solid var(--rc);border-radius:var(--r-card);padding:.9rem}
.ab.rare,.legend .rare{--rc:var(--r-rare)}.ab.epic,.legend .epic{--rc:var(--r-epic)}
.ab.legendary,.legend .legendary{--rc:var(--r-legendary)}
.ab>.slot{grid-area:slot}.ab>.ab-top{grid-area:top}.ab>h3{grid-area:title}.ab>p{grid-area:text}.ab>.clip{grid-area:media}
.ab.has-clip{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "media" "title" "text"}
.ab.legendary{grid-column:span 2;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"slot top" "slot title" "slot text";align-items:start;box-shadow:var(--lip),0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent),0 0 30px color-mix(in srgb,var(--rc) 22%,transparent)}
.ab.legendary.has-clip{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"media top" "media title" "media text"}
.ab-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem}
.ab h3{font-size:1.3125rem}
.ab p{font-size:var(--t-body);color:var(--muted);line-height:1.5}
.ab>.ab-cap{grid-area:auto;font-size:.8125rem;line-height:1.45}
.inv-note{margin-top:1.25rem;font-size:var(--t-small);color:var(--muted);max-width:75ch}
/* Item slot: a sunken inventory square with the ability's glyph and its rarity glow */
.slot{--sz:72px;width:var(--sz);height:var(--sz);align-self:start;display:grid;place-items:center;border-radius:16px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--rc) 28%,transparent),transparent),var(--sunken);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rc) 60%,transparent),inset 0 -5px 0 rgb(0 0 0/.35)}
.slot svg{width:64%;height:64%;overflow:visible}
.ab.legendary .slot,.price-card .slot{--sz:104px;border-radius:22px;box-shadow:inset 0 0 0 3px var(--rc),inset 0 -6px 0 rgb(0 0 0/.35),0 0 26px color-mix(in srgb,var(--rc) 40%,transparent)}
.g .p{fill:var(--rc)}.g .s{fill:var(--text)}.g .k{fill:var(--ink)}.g .n{fill:none}
.g .o{stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.g .lu{fill:none;stroke:var(--ink);stroke-width:7.5;stroke-linecap:round;stroke-linejoin:round}
.g .ln{fill:none;stroke:var(--rc);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.g .dash{fill:none;stroke:var(--text);stroke-width:2.5;stroke-dasharray:.5 5;stroke-linecap:round}

/* ===== Checks its own work ===== */
.verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:clamp(2rem,4vw,3rem);background:var(--sunken);border-radius:var(--r-card);box-shadow:inset 0 -4px 0 rgb(0 0 0/.3)}
.verdict{display:grid;justify-items:center;align-content:center;gap:.9rem;padding:clamp(1.25rem,3vw,2rem) 1rem;text-align:center;min-width:0}
.verdict+.verdict{border-left:2px dashed var(--line)}
.verdict .stamp{justify-self:center;align-self:center}
.verdict .vl{color:var(--muted);font:600 var(--t-small)/1.3 var(--f-body)}
.checks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.vcard{display:grid;gap:.8rem;align-content:start;background:var(--panel);border-radius:var(--r-card);padding:1.1rem;min-width:0}
.vcard p{color:var(--muted)}
@media (max-width:640px){
  .verdicts{grid-template-columns:minmax(0,1fr)}
  .verdict{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:.5rem 1rem}
  .verdict .stamp{justify-self:start}
  .verdict+.verdict{border-left:0;border-top:2px dashed var(--line)}
}

/* ===== Comparison: the section title lives in the table's own header bar ===== */
.cmp{background:var(--panel);border-radius:var(--r-card);overflow:hidden}
.cmp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem 1.5rem;align-items:end;padding:clamp(1.25rem,3vw,2rem);background:var(--panel-2);border-bottom:3px solid var(--ink)}
.cmp-title{display:grid;gap:.6rem}
.cmp-head .stamp{align-self:center}
.cmp-lede{grid-column:1/-1;font-size:var(--t-small);color:var(--muted);max-width:75ch}
.cmp .tablewrap{border-radius:0;background:transparent}
@media (min-width:1080px){.scroll-hint{display:none}}
@media (max-width:640px){.cmp-head{grid-template-columns:minmax(0,1fr)}}
.tablewrap{overflow-x:auto;border-radius:var(--r-panel);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:62rem;font-size:var(--t-small);line-height:1.45}
th,td{text-align:left;vertical-align:top;padding:.75rem .85rem;border-bottom:1px solid var(--line)}
thead th{font:400 1rem/1.2 var(--f-display);letter-spacing:.01em;color:var(--text);background:var(--panel-2)}
tbody th{font-weight:700;color:var(--text);position:sticky;left:0;background:var(--panel);min-width:10rem}
td{color:var(--muted)}
td.us{color:var(--text);background:var(--us-cell)}
thead th.us{background:var(--extrude);color:var(--ink)}
.worse{display:inline-block;margin-left:.3rem;font:700 .6875rem/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--warn);border-radius:4px;padding:.25em .4em;vertical-align:.1em}
.tbl-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.75rem;font-size:var(--t-small);color:var(--muted)}
.tbl-cap b{color:var(--text)}
.table-small table{min-width:40rem}
@media (max-width:560px){tbody th{min-width:7.5rem}.table-small table{min-width:0}}
.cmp-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:1.5rem}
.worse-box{background:var(--panel);border-radius:var(--r-card);border:3px solid var(--warn);padding:1.1rem;display:grid;gap:.75rem;align-content:start}
.same-box{background:var(--panel);border-radius:var(--r-card);padding:1.1rem;display:grid;gap:.75rem;align-content:start}
.worse-box ul,.plain-list{margin:0;padding-left:1.1em;display:grid;gap:.45rem;color:var(--muted)}
.worse-box li::marker{color:var(--warn)}
.sources{margin-top:1rem;font-size:var(--t-small);color:var(--muted);line-height:1.8}
.sources a{color:var(--muted)}

/* ===== Setup ===== */
.setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.5rem;align-items:start}
.req{background:var(--panel);border-radius:var(--r-card);padding:1.2rem;display:grid;gap:.8rem}
.req h3{font-size:1.125rem}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ticks li{position:relative;padding-left:1.9rem}
.ticks li::before{content:"";position:absolute;left:0;top:.2em;width:1.2rem;height:1.2rem;border-radius:5px;background:var(--pass);box-shadow:inset 0 0 0 2px var(--ink)}
.ticks li::after{content:"";position:absolute;left:.42rem;top:.36em;width:.32rem;height:.62rem;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.ticks.opt li::before{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.ticks.opt li::after{display:none}
.ticks.opt li{color:var(--muted)}
.steps{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.75rem;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:10px;background:var(--panel-2);border:2px solid var(--ink);font:400 1.25rem/1 var(--f-display)}
.steps b{display:block;font:400 1.125rem/1.3 var(--f-display);letter-spacing:.01em}
.steps span{color:var(--muted)}
/* Where each part will run: your AI plan above, your PC linked to our service by the license key */
.where{margin:0;display:grid;gap:.75rem}
.where-grid{display:grid;grid-template-columns:minmax(0,1fr) 9rem minmax(0,1fr);grid-template-areas:"ai ai ai" "up . ." "pc key svc"}
.zone{display:grid;gap:.45rem;align-content:start;background:var(--panel);border:3px solid var(--line);border-radius:var(--r-card);padding:.85rem 1rem 1rem;box-shadow:var(--lip)}
.zone-h{font:400 1.125rem/1.2 var(--f-display);letter-spacing:.01em;color:var(--text)}
.zone ul{margin:0;padding-left:1.1em;display:grid;gap:.25rem}
.zone ul,.zone p:not(.zone-h){font-size:var(--t-small);line-height:1.4;color:var(--muted)}
.zone-pc{grid-area:pc;border-color:var(--extrude)}
.zone-svc{grid-area:svc;border-color:var(--text)}
.zone-ai{grid-area:ai;background:transparent;border-style:dashed;box-shadow:none}
.wl{position:relative;margin:0}
.wl-up{grid-area:up;height:1.75rem}
.wl-up::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:3px dashed var(--line);translate:-50% 0}
.wl-key{grid-area:key;display:grid;place-items:center}
.wl-key::before{content:"";position:absolute;left:3px;right:12px;top:50%;border-top:3px solid var(--muted);translate:0 -50%}
.wl-key::after{content:"";position:absolute;right:2px;top:50%;translate:0 -50%;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent var(--muted)}
.wl-key>span{position:relative;font:600 .75rem/1.2 var(--f-mono);color:var(--text);background:var(--sunken);border:2px solid var(--line);border-radius:999px;padding:.3em .6em;text-align:center}
@media (max-width:560px){
  .where-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"ai" "up" "pc" "key" "svc"}
  .wl-key{height:3.75rem}
  .wl-key::before{left:50%;right:auto;top:0;bottom:12px;border-top:0;border-left:3px solid var(--muted);translate:-50% 0}
  .wl-key::after{left:50%;right:auto;top:auto;bottom:0;translate:-50% 0;border-width:12px 8px 0;border-color:var(--muted) transparent transparent}
}

/* ===== Founder + pricing ===== */
.deal{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.5rem;align-items:start}
.founder{background:var(--panel);border-radius:var(--r-card);padding:1.25rem;display:grid;grid-template-columns:5.5rem minmax(0,1fr);grid-template-rows:auto auto;align-content:start;gap:1.1rem}
.avatar{align-self:start;width:5.5rem;height:5.5rem;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--sunken);border:3px solid var(--line)}
.avatar svg{width:62%;height:62%}
.avatar img{width:100%;height:100%;object-fit:cover}
.founder-body{display:grid;gap:.6rem;align-content:start}
.founder-body p{color:var(--muted)}
.roadmap{grid-column:1/-1;align-self:start;padding-top:.5rem;display:grid;gap:.7rem}
.roadmap .drives li{background:var(--sunken);box-shadow:none}
.roadmap .drives .dt{font-size:1rem}
.handle{color:var(--text)}
/* The price card is the page's one loot-table shop item */
.price-card{--rc:var(--r-legendary);position:relative;background:var(--panel);border:3px solid var(--rc);border-radius:22px;padding:1.4rem;display:grid;gap:1.1rem;box-shadow:var(--lip),0 0 0 1px color-mix(in srgb,var(--rc) 35%,transparent),0 0 36px color-mix(in srgb,var(--rc) 22%,transparent)}
.pc-head{display:flex;align-items:center;gap:1.1rem}
.pc-name{display:grid;gap:.5rem;justify-items:start}
.pc-name h3{font-size:1.625rem}
.price-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.1rem}
.coin-pill{display:inline-flex;align-items:center;background:var(--sunken);border:3px solid var(--ink);border-radius:999px;padding:.12em .5em .06em;color:var(--coin);box-shadow:inset 0 -4px 0 rgb(0 0 0/.35),0 3px 0 var(--ink)}
.price{font-family:var(--f-display);font-size:clamp(3rem,7vw,4.25rem);line-height:1;font-variant-numeric:tabular-nums}
.later{font:600 var(--t-body)/1.35 var(--f-body);color:var(--muted)}
.incl{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.incl li{position:relative;padding-left:1.5rem}
.incl li::before{content:"";position:absolute;left:.1rem;top:.5em;width:.62rem;height:.62rem;border-radius:2px;background:var(--r-legendary);transform:rotate(45deg);box-shadow:0 0 0 2px var(--ink)}
.price-card .btn-cta{width:100%}
.price-card .kit{display:block}
.price-card .kit .tag{margin-right:.4rem}
.deliv{font-size:var(--t-small);color:var(--muted);background:var(--sunken);border-radius:10px;padding:.8rem .9rem}

/* ===== FAQ ===== */
.faq{display:grid;gap:.6rem;max-width:74ch}
.faq details{background:var(--panel);border-radius:var(--r-panel);padding:.95rem 1.1rem}
.faq summary{cursor:pointer;font:400 1.125rem/1.35 var(--f-display);letter-spacing:.01em}
.faq details p{margin-top:.6rem;color:var(--muted)}

/* ===== Sign-up forms ===== */
.form{display:grid;gap:.75rem;max-width:34rem}
.form-row{display:flex;flex-wrap:wrap;gap:.6rem}
.form input[type="email"]{flex:1 1 14rem;min-width:0;min-height:3.25rem;padding:.6rem .9rem;border-radius:12px;border:2px solid var(--line);background:var(--sunken);color:var(--text);font:400 var(--t-body)/1.2 var(--f-body)}
.form input[type="email"]::placeholder{color:var(--placeholder)}
.form input[type="email"]:focus-visible{border-color:var(--text);outline:3px solid var(--cta);outline-offset:2px}
.form input:disabled{opacity:.6;cursor:not-allowed}
.check{display:flex;align-items:center;gap:.6rem;font-weight:600;cursor:pointer}
.check:has(input:disabled){color:var(--muted);cursor:not-allowed}
.check input{width:1.25rem;height:1.25rem;accent-color:var(--pass);margin:0;flex:none}
.privacy{font-size:var(--t-small);color:var(--muted)}
.status{font-size:var(--t-small);font-weight:600}
.status:empty{display:none}
.status.ok{color:var(--pass)}.status.warn{color:var(--warn)}
.signup-panel{background:var(--panel);border-radius:22px;padding:clamp(1.25rem,4vw,2.5rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start}
.signup-panel .sec-head{margin-bottom:0}
.counter{font:400 1.125rem/1.3 var(--f-display);color:var(--text)}

footer{padding-block:2.5rem 3rem;border-top:2px solid var(--panel);display:grid;gap:.4rem;font-size:var(--t-small);color:var(--muted)}

/* ===== Responsive ===== */
@media (max-width:960px){
  .hero,.screens-foot,.file-grid,.setup,.deal,.signup-panel,.cmp-foot{grid-template-columns:minmax(0,1fr)}
  .hero.has-clip>:last-child{order:-1}
  .checks-grid{grid-template-columns:minmax(0,1fr)}
  .inv,.legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .inv,.legend{grid-template-columns:minmax(0,1fr)}
  .ab.legendary{grid-column:auto;grid-template-columns:72px minmax(0,1fr);grid-template-areas:"slot top" "slot title" "text text";align-items:center}
  .ab.legendary .slot{--sz:72px;border-radius:16px}
  .ab.legendary.has-clip{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "media" "title" "text"}
  .founder{grid-template-columns:minmax(0,1fr)}
  .cta-row .btn,.form-row .btn{flex:1 1 auto}
  .pc-head .slot{--sz:84px}
}
@media (max-width:640px){
  /* Phones: the shop illustration sits right under the lede, not below the form */
  .hero{gap:1.4rem}
  .hero-copy{display:contents}
  .hero-copy>:nth-child(n+4){order:2}
  .hero-media{order:1}
  .hero.has-clip>.hero-media{order:1}   /* with the clip too: a 9-line tool log under it would push the headline below the fold */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}