:root{
  --ink:#fff; --muted:rgba(255,255,255,.66);
  --font-display:"Anton","Bebas Neue","Impact","Arial Black",system-ui,sans-serif;
  --font-body:"Inter","Space Grotesk","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#05060a;color:var(--ink);font-family:var(--font-body);overflow:hidden}
body{display:grid;place-items:center;background:radial-gradient(1200px 800px at 50% 30%,#171a2e 0%,#05060a 70%)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}

/* ---------- 9:16 stage ---------- */
.stage{position:relative;aspect-ratio:9/16;height:min(100dvh,calc(100vw*16/9));container-type:size;overflow:hidden;background:#000;border-radius:min(2.4cqw,22px);box-shadow:0 30px 120px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
@media (max-aspect-ratio:9/16){.stage{border-radius:0}}
.layer{position:absolute;inset:0}
.card{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .35s}
.card.on{opacity:1}
.card .bg{position:absolute;inset:0}
.card .fx{position:absolute;inset:0;pointer-events:none}
.paused .card *{animation-play-state:paused!important}

.progress{position:absolute;top:2cqw;left:3cqw;right:3cqw;display:flex;gap:.6cqw;z-index:20}
.progress i{flex:1;height:.7cqw;border-radius:1cqw;background:rgba(255,255,255,.28);overflow:hidden;display:block}
.progress i b{display:block;height:100%;width:0;background:#fff}
.progress i.done b{width:100%}
.chrome{position:absolute;top:5cqw;left:4cqw;right:4cqw;display:flex;justify-content:space-between;align-items:center;z-index:20;font-weight:700;letter-spacing:.04em}
.chrome .brand{opacity:.85;text-transform:uppercase;font-size:2.8cqw;letter-spacing:.22em}
.chrome button{width:8cqw;height:8cqw;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);font-size:4cqw;display:grid;place-items:center}
.tap{position:absolute;top:14cqw;bottom:0;z-index:10;width:36%}
.tap.l{left:0}.tap.r{right:0}.tap.mid{left:36%;width:28%}

/* ---------- layout primitives (fixed spacing so nothing overlaps) ---------- */
.pad{position:absolute;inset:0;padding:16cqw 7cqw 8cqw;display:flex;flex-direction:column;gap:2.4cqw;z-index:2}
.pad>*{flex:none;min-width:0}
.grow{flex:1 1 0!important;min-height:0}
.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.kicker{font-size:3.3cqw;font-weight:800;letter-spacing:.24em;text-transform:uppercase;opacity:.9;line-height:1.3}
.h1{font-family:var(--font-display);font-size:13cqw;line-height:1.04;text-transform:uppercase}
.h2{font-family:var(--font-display);font-size:8.6cqw;line-height:1.08;text-transform:uppercase}
.big{font-family:var(--font-display);font-size:22cqw;line-height:1.08;font-variant-numeric:tabular-nums;white-space:nowrap}
.big.xl{font-size:26cqw}
.sub{font-size:4.2cqw;line-height:1.35;font-weight:500;opacity:.94}
.sub b{font-weight:800}
.small{font-size:3.1cqw;opacity:.75;line-height:1.4}
.glow{text-shadow:0 0 5cqw currentColor}
.t-center{text-align:center}
.mt1{margin-top:1cqw}.mt2{margin-top:2.5cqw}.mt3{margin-top:5cqw}

.rise{animation:rise .75s cubic-bezier(.2,.9,.2,1) var(--d,0s) both}
.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1) var(--d,0s) both}
.fade{animation:fade .8s ease var(--d,0s) both}
.slam{animation:slam .45s cubic-bezier(.2,1.3,.3,1) var(--d,0s) both}
@keyframes rise{from{opacity:0;transform:translateY(5cqw)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slam{0%{opacity:0;transform:scale(2.2)}60%{opacity:1;transform:scale(.94)}100%{transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2cqw)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-1cqw,.5cqw)}40%{transform:translate(1cqw,-.5cqw)}60%{transform:translate(-.6cqw,-.4cqw)}80%{transform:translate(.6cqw,.4cqw)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(-2deg)}25%{transform:scale(1.06,1.12) rotate(2deg)}50%{transform:scale(.96,1.05) rotate(-1deg)}75%{transform:scale(1.04,1.15) rotate(3deg)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-20deg)}to{transform:translateX(220%) skewX(-20deg)}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
@keyframes roadscroll{from{background-position-x:0}to{background-position-x:-40cqw}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2cqw)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes charge{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* ---------- gate (landing) ---------- */
.gate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;padding:9cqw 8cqw 6cqw;gap:2.6cqw;overflow:auto;background:
  radial-gradient(90cqw 70cqw at 80% 0%,#ff3d81 0%,transparent 60%),radial-gradient(90cqw 80cqw at 0% 70%,#5b3cff 0%,transparent 60%),#0b0620}
.gate .kicker{color:#c6ff3d}
.gate h1{font-family:var(--font-display);font-size:20cqw;line-height:1;text-transform:uppercase;margin-top:1cqw}
.gate h1 span{color:#c6ff3d}
.gate .tagline{font-family:var(--font-display);font-size:8cqw;line-height:1.1;text-transform:uppercase;opacity:.95}
.gate p.lead{font-size:4cqw;line-height:1.4;opacity:.9}
.gate .grow{flex:1 1 0;min-height:2cqw}
.btn{display:block;width:100%;text-align:center;padding:4cqw;border-radius:8cqw;font-weight:900;font-size:4.4cqw;letter-spacing:.03em}
.btn.go{background:#c6ff3d;color:#10131f;box-shadow:0 0 6cqw rgba(198,255,61,.45)}
.btn.alt{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:3.8cqw;padding:3.4cqw}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.gate details{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:4cqw;padding:3cqw 4cqw}
.gate summary{cursor:pointer;font-size:3.6cqw;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:2cqw;align-items:center}
.gate summary::-webkit-details-marker{display:none}
.gate summary span{opacity:.7;font-weight:500;font-size:3.1cqw;text-align:right}
.gate .fields{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw;margin-top:3cqw}
.gate .fields .wide{grid-column:1/3}
.gate label{font-size:2.6cqw;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75;display:block;margin-bottom:1cqw}
.gate input,.gate select{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.22);border-radius:3cqw;padding:2.6cqw 3.4cqw;font-size:3.8cqw;outline:none;width:100%}
.gate select option{color:#000}
.gate .links{display:flex;justify-content:center;gap:5cqw;font-size:3.2cqw;font-weight:700}
.gate .links button{opacity:.85;text-decoration:underline;text-underline-offset:.6cqw}
.gate .prog{height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.15);overflow:hidden;display:none}
.gate .prog b{display:block;height:100%;width:0;background:#c6ff3d;transition:width .2s}
.gate .msg{font-size:3.3cqw;color:#ffd166;min-height:0;text-align:center}
.gate .legal{font-size:2.5cqw;opacity:.5;text-align:center}

/* ---------- info sheets ---------- */
.sheet{position:absolute;inset:0;z-index:50;display:none;background:rgba(0,0,0,.55);align-items:flex-end}
.sheet.on{display:flex}
.sheet .panel{background:#14102b;border-radius:6cqw 6cqw 0 0;width:100%;max-height:92%;overflow:auto;padding:6cqw 6.5cqw 9cqw;border-top:1px solid rgba(255,255,255,.18);animation:rise .35s ease both}
.sheet h2{font-family:var(--font-display);font-size:9cqw;text-transform:uppercase;line-height:1.05;margin-bottom:3cqw}
.sheet h3{font-size:3.8cqw;font-weight:800;margin:4.5cqw 0 1.5cqw;color:#c6ff3d}
.sheet p,.sheet li{font-size:3.5cqw;line-height:1.5;opacity:.93}
.sheet ol,.sheet ul{padding-left:5cqw;display:flex;flex-direction:column;gap:1.4cqw}
.sheet .x{position:sticky;top:0;float:right;width:8cqw;height:8cqw;border-radius:50%;background:rgba(255,255,255,.14);font-size:4cqw}
.sheet .note{background:rgba(198,255,61,.1);border:1px solid rgba(198,255,61,.3);border-radius:3cqw;padding:3cqw;margin-top:3cqw}
.sheet code{background:rgba(255,255,255,.12);padding:.2cqw 1cqw;border-radius:1cqw;font-size:3.2cqw}

/* ---------- shared bits ---------- */
.odo{display:flex;justify-content:center;font-family:var(--font-display);font-size:19cqw;line-height:1;height:1.1em;overflow:hidden}
.odo .col{height:1.1em;overflow:hidden;width:.56em;text-align:center}
.odo .col div{transition:transform 2.6s cubic-bezier(.15,.8,.15,1)}
.odo .col div span{display:block;height:1.1em;line-height:1.1}
.odo .sep{width:.28em;text-align:center;line-height:1.1}
.chip{display:inline-block;padding:1.6cqw 3.2cqw;border-radius:6cqw;background:rgba(255,255,255,.16);font-weight:800;font-size:3.2cqw;border:1px solid rgba(255,255,255,.22)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:2.6cqw}
.tile{border-radius:4cqw;padding:3.4cqw;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);min-width:0}
.tile .n{font-family:var(--font-display);font-size:8.6cqw;line-height:1.1;white-space:nowrap}
.tile .l{font-size:2.9cqw;opacity:.88;margin-top:.8cqw;line-height:1.3}
.tile .e{font-size:5.4cqw;line-height:1.2}
.footprint{position:absolute;opacity:0;animation:fp 4.6s linear forwards}
@keyframes fp{0%{opacity:0}10%{opacity:.85}70%{opacity:.45}100%{opacity:0}}
.bar{background:linear-gradient(#fff,rgba(255,255,255,.4));border-radius:1cqw 1cqw 0 0}
svg text{font-family:var(--font-body)}
canvas.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:15}
.shine{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.shine::after{content:"";position:absolute;top:0;bottom:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 2.6s ease-in-out 1s infinite}
.fullfact .art{height:68cqw;display:flex;align-items:center;justify-content:center;position:relative}
.fullfact .art svg{width:100%;height:100%;overflow:visible}
.row2{display:flex;gap:2.6cqw}.row2>*{flex:1;min-width:0}
.gate label.btn{font-size:3.8cqw;letter-spacing:.03em;text-transform:none;opacity:1;margin:0;padding:3.4cqw}
