/* ============================================================
   ULTRAFAST//SOL — wafer-scale spectacle
   silicon-disc macro photography · speed-line token cascades ·
   thermodynamic drama · chip-reverence
   ============================================================ */

@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/sg-400.woff2") format("woff2");}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/sg-500.woff2") format("woff2");}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/sg-700.woff2") format("woff2");}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/jbm-400.woff2") format("woff2");}
@font-face{
  font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/jbm-700.woff2") format("woff2");}

:root{
  --ink:#05060a;            /* silicon black */
  --ink-2:#0a0d16;          /* wafer face */
  --ink-3:#101522;          /* raised die */
  --edge:#1c2334;           /* scribe line */
  --silver:#c9d4e6;         /* polished silicon */
  --dim:#7a86a0;            /* matte silicon */
  --cyan:#38e8ff;           /* plasma channel */
  --violet:#8b5cff;         /* thin-film violet */
  --magenta:#ff3df0;        /* thermal overload */
  --amber:#ffb340;          /* copper interconnect */
  --red:#ff4d5e;            /* junction limit */
  --good:#45ffb0;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --hud-h:56px;
  --rad:14px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overscroll-behavior-y:none}
body{
  background:var(--ink);
  color:var(--silver);
  font-family:var(--disp);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--cyan);color:var(--ink)}
img,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:var(--cyan);text-decoration:none}
b,strong{color:var(--silver)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-60px;left:12px;z-index:200;
  background:var(--cyan);color:var(--ink);font-family:var(--mono);font-size:12px;
  padding:8px 14px;border-radius:6px;transition:top .2s;
}
.skip-link:focus{top:12px}

/* silicon grain + vignette over everything */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:screen;
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%,transparent 55%,rgba(0,0,0,.55) 100%);
}

#ambient{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100vw;height:100vh;
}

/* ============ HUD ============ */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--hud-h);
  display:flex;align-items:center;gap:18px;padding:0 18px;
  background:linear-gradient(180deg,rgba(5,6,10,.92),rgba(5,6,10,.75));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--edge);
}
.hud__brand{display:flex;align-items:center;gap:9px;color:var(--silver)}
.hud__waferdot{
  width:18px;height:18px;border-radius:50%;flex:none;
  background:conic-gradient(from 210deg,var(--cyan),var(--violet),var(--magenta),var(--amber),var(--cyan));
  box-shadow:0 0 10px rgba(56,232,255,.5),inset 0 0 5px rgba(0,0,0,.65);
  animation:waferdot 9s linear infinite;
}
@keyframes waferdot{to{transform:rotate(360deg)}}
.hud__title{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em}
.hud__title em{font-style:normal;color:var(--cyan)}
.hud__nav{display:flex;gap:2px;margin-left:auto}
.hud__nav a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);
  padding:6px 10px;border-radius:6px;transition:color .15s,background .15s;
}
.hud__nav a:hover,.hud__nav a:focus-visible{color:var(--cyan);background:rgba(56,232,255,.07)}
.hud__right{display:flex;align-items:center;gap:10px}
.hud__score{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  border:1px solid var(--edge);border-radius:999px;padding:5px 12px;
  background:rgba(16,21,34,.8);transition:border-color .3s,box-shadow .3s;
}
.hud__score.bump{border-color:var(--amber);box-shadow:0 0 14px rgba(255,179,64,.35)}
.hud__score-label{color:var(--dim)}
.hud__score-value{color:var(--amber);font-weight:700;min-width:3ch;text-align:right}
.hud__streak{color:var(--magenta);font-weight:700}
.hud__mute{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--edge);
  display:grid;place-items:center;color:var(--dim);transition:color .15s,border-color .15s;
}
.hud__mute:hover{color:var(--cyan);border-color:var(--cyan)}
.hud__mute .mut{display:none}
.hud__mute[aria-pressed="true"] .mut{display:block}
.hud__mute[aria-pressed="true"] .wav{display:none}
.hud__menu{
  display:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--edge);
  color:var(--silver);font-size:16px;line-height:1;
}
.hud__menu:hover{color:var(--cyan);border-color:var(--cyan)}

/* ============ shared section chrome ============ */
main{position:relative;z-index:2}
.section{position:relative;padding:110px clamp(18px,5vw,64px) 90px;max-width:1280px;margin:0 auto}
.section__head{max-width:840px;margin-bottom:44px}
.section__kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--cyan);
  margin-bottom:14px;display:flex;align-items:center;gap:12px;
}
.section__kicker::before{content:"";width:34px;height:1px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.section__title{
  font-weight:700;font-size:clamp(34px,5.4vw,64px);line-height:.98;
  letter-spacing:-.015em;text-transform:uppercase;
}
.section__title .accent{
  background:linear-gradient(92deg,var(--cyan) 5%,var(--violet) 45%,var(--magenta) 75%,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section__lede{margin-top:16px;color:var(--dim);font-size:15px;max-width:620px}
.section__lede b{color:var(--silver)}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.4s}

.btn{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;
  padding:11px 20px;border-radius:9px;border:1px solid var(--edge);
  color:var(--silver);background:rgba(16,21,34,.85);
  transition:transform .12s,box-shadow .2s,border-color .2s,color .2s;
}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--cyan);color:var(--cyan);box-shadow:0 4px 22px rgba(56,232,255,.18)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--primary{
  background:linear-gradient(120deg,#0b3d47,#0e5a63 45%,#123a5e);
  border-color:rgba(56,232,255,.55);color:var(--cyan);
  box-shadow:0 0 18px rgba(56,232,255,.22),inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--primary:hover:not(:disabled){color:#e8feff;box-shadow:0 0 26px rgba(56,232,255,.4)}

.chip{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  border:1px solid var(--edge);border-radius:999px;padding:6px 12px;color:var(--dim);
  background:rgba(16,21,34,.7);
}
.chip:not(.chip--ghost){color:var(--amber);border-color:rgba(255,179,64,.4)}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;
  padding:calc(var(--hud-h) + 40px) clamp(18px,5vw,64px) 60px;
  overflow:hidden;
}
.hero__grid{
  position:absolute;inset:-2px;pointer-events:none;opacity:.5;
  background:
    linear-gradient(rgba(56,232,255,.05) 1px,transparent 1px) 0 0/100% 44px,
    linear-gradient(90deg,rgba(56,232,255,.05) 1px,transparent 1px) 0 0/44px 100%;
  mask-image:radial-gradient(90% 70% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%,#000 30%,transparent 78%);
}
.hero__inner{position:relative;width:100%;max-width:1180px;margin:0 auto}
.hero__kicker{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.hero__title{
  font-weight:700;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(40px,8.4vw,110px);line-height:.94;
}
.hero__line{display:block}
.hero__14x{
  background:linear-gradient(100deg,var(--amber),var(--magenta) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,61,240,.35));
}
.hero__speed{
  background:linear-gradient(92deg,#fff 10%,var(--cyan) 55%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.hero__cursor{
  display:inline-block;width:.09em;height:.78em;margin-left:.08em;vertical-align:-.08em;
  background:var(--cyan);box-shadow:0 0 18px var(--cyan);
  animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}
.hero__sub{margin-top:22px;max-width:560px;color:var(--dim);font-size:16px}
.hero__sub b{color:var(--silver)}
.hero__scrollcue{
  margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;
  color:var(--dim);display:flex;align-items:center;gap:12px;
}
.hero__scrollcue span{
  width:1px;height:34px;background:linear-gradient(var(--cyan),transparent);
  animation:cue 1.6s ease-in-out infinite;
}
@keyframes cue{0%,100%{transform:scaleY(.4);opacity:.4}50%{transform:scaleY(1);opacity:1}}

/* ---- token relay ---- */
.race{
  margin-top:34px;max-width:760px;
  border:1px solid var(--edge);border-radius:var(--rad);
  background:linear-gradient(160deg,rgba(16,21,34,.88),rgba(10,13,22,.92));
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);
  padding:16px 18px;
}
.race__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.race__title{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.24em;color:var(--cyan)}
.race__hint{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.04em}
.race__lane{margin:10px 0}
.race__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;margin-bottom:5px}
.race__name{letter-spacing:.14em;font-weight:700}
.race__name small{color:var(--dim);font-weight:400;letter-spacing:.06em}
.race__name--ultra{color:var(--cyan)}
.race__name--std{color:var(--dim)}
.race__name--human{color:var(--amber)}
.race__rate{color:var(--dim);font-variant-numeric:tabular-nums}
.race__rate.live{color:var(--cyan)}
.race__track{
  position:relative;height:14px;border-radius:7px;overflow:hidden;
  background:rgba(5,6,10,.9);border:1px solid var(--edge);
}
.race__bar{
  position:absolute;inset:0;width:0%;
  border-radius:7px;
}
[data-lane="ultra"] .race__bar{
  background:linear-gradient(90deg,#0e6d7c,var(--cyan) 60%,#baf6ff);
  box-shadow:0 0 16px rgba(56,232,255,.55);
}
[data-lane="std"] .race__bar{background:linear-gradient(90deg,#3a4358,#7a86a0)}
[data-lane="human"] .race__bar{background:linear-gradient(90deg,#7c5a1e,var(--amber))}
.race__tokens{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
}
.race__tokens i{
  position:absolute;top:0;bottom:0;width:2px;border-radius:1px;
  background:linear-gradient(#fff,var(--cyan));
  opacity:.9;animation:tokstreak .5s linear forwards;
}
@keyframes tokstreak{from{transform:translateX(0)}to{transform:translateX(-90px);opacity:0}}
.race__out{
  font-family:var(--mono);font-size:10px;color:var(--dim);min-height:15px;margin-top:4px;
  letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.race__controls{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.race__clock{font-family:var(--mono);font-size:12px;color:var(--dim)}
.race__clock span{color:var(--silver);font-variant-numeric:tabular-nums}
.race__verdict{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.04em}

/* ============ NUMBERS / STATS ============ */
.stats{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.stat{
  position:relative;perspective:900px;min-height:170px;cursor:pointer;
  border-radius:var(--rad);
}
.stat__inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.3,.8,.3,1);
}
.stat.flipped .stat__inner{transform:rotateY(180deg)}
.stat__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--edge);border-radius:var(--rad);
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) padding-box,
    linear-gradient(140deg,rgba(56,232,255,.25),transparent 40%,rgba(255,179,64,.18)) border-box;
  border-color:transparent;
  padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.stat__face::before{ /* die scribe texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background:
    repeating-linear-gradient(0deg,transparent 0 13px,rgba(122,134,160,.12) 13px 14px),
    repeating-linear-gradient(90deg,transparent 0 13px,rgba(122,134,160,.12) 13px 14px);
  mask-image:linear-gradient(160deg,#000,transparent 65%);
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 65%);
}
.stat__face--back{
  transform:rotateY(180deg);
  justify-content:center;gap:10px;text-align:center;
}
.stat__tag{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--dim)}
.stat__num{
  font-family:var(--mono);font-weight:700;color:#fff;
  font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.stat__num .u{font-size:.42em;color:var(--cyan);letter-spacing:.06em;margin-left:4px}
.stat__ctx{font-size:12.5px;color:var(--dim);line-height:1.4}
.stat__ctx b{color:var(--amber)}
.stat__hint{position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:9px;color:var(--dim);letter-spacing:.16em;opacity:.7}
.stat:hover .stat__face{border-color:rgba(56,232,255,.35)}
.stat.absorbed .stat__face{box-shadow:inset 0 0 0 1px rgba(255,179,64,.4),0 0 18px rgba(255,179,64,.12)}
.stat.absorbed .stat__hint{color:var(--amber);opacity:1}
.stat__backtitle{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--cyan)}
.stat__backfact{font-size:13.5px;color:var(--silver);line-height:1.5}
.stat__backfact b{color:var(--amber)}

/* ============ WAFER ANATOMY ============ */
.waferwrap{position:relative;height:560vh}
.waferwrap__sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:radial-gradient(90% 90% at 50% 55%,#0b0f1a 0%,var(--ink) 70%);
}
#waferCanvas{position:absolute;inset:0;width:100%;height:100%}
.waferwrap__hud{
  position:absolute;left:clamp(18px,5vw,64px);top:calc(var(--hud-h) + 34px);
  max-width:430px;pointer-events:none;
}
.waferwrap__kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.34em;color:var(--cyan);margin-bottom:10px;
}
.waferwrap__title{font-size:clamp(30px,4.6vw,56px);line-height:.96;font-weight:700;text-transform:uppercase}
.waferwrap__fact{margin-top:14px;color:var(--dim);font-size:14px;min-height:66px;transition:opacity .3s}
.waferwrap__fact b{color:var(--silver)}
.waferwrap__step{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:.2em}
.waferwrap__callout{
  position:absolute;pointer-events:none;
  display:flex;align-items:center;gap:10px;
  transform:translate(-50%,-50%);
  transition:opacity .35s;
  max-width:92vw;
}
.waferwrap__callout[hidden]{display:none}
.waferwrap__callout::before{
  content:"";position:absolute;left:-26px;top:50%;width:20px;height:1px;background:var(--amber);
}
.waferwrap__callout-num{
  font-family:var(--mono);font-weight:700;font-size:clamp(20px,2.6vw,32px);
  color:var(--amber);text-shadow:0 0 22px rgba(255,179,64,.5);white-space:nowrap;
}
.waferwrap__callout-text{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--silver);
  background:rgba(5,6,10,.85);border:1px solid var(--edge);border-radius:6px;
  padding:6px 10px;white-space:nowrap;max-width:70vw;
}
@media (max-width:640px){
  .waferwrap__callout-text{white-space:normal;letter-spacing:.08em;line-height:1.4}
  .waferwrap__callout::before{display:none}
}
.waferwrap__steps{position:relative;pointer-events:none}
.wstep{height:93.33vh}

/* ============ SCALE ============ */
.scale__stage{
  border:1px solid var(--edge);border-radius:var(--rad);
  background:linear-gradient(170deg,#0a0e18,#05070c);
  overflow:hidden;position:relative;
}
#scaleCanvas{width:100%;height:clamp(360px,56vh,560px)}
.scale__loupectl{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 18px;border-top:1px solid var(--edge);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);
}
.scale__loupectl input[type=range]{flex:1;min-width:160px;accent-color:var(--cyan)}
.scale__legend{display:flex;gap:16px;flex-wrap:wrap}
.scale__legend span{display:flex;align-items:center;gap:7px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw--wse{background:linear-gradient(135deg,var(--cyan),var(--violet))}
.sw--gpu{background:var(--amber)}
.scale__bars{display:grid;gap:12px;margin-top:26px;max-width:720px}
.sbar{display:grid;grid-template-columns:130px 1fr 70px;align-items:center;gap:14px;font-family:var(--mono)}
.sbar__label{font-size:10.5px;letter-spacing:.2em;color:var(--dim)}
.sbar__track{height:10px;border-radius:5px;background:rgba(5,6,10,.9);border:1px solid var(--edge);overflow:hidden}
.sbar__fill{
  height:100%;width:0%;border-radius:5px;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  box-shadow:0 0 12px rgba(56,232,255,.5);
  transition:width 1.3s cubic-bezier(.2,.8,.2,1);
}
.sbar__val{font-size:14px;font-weight:700;color:var(--cyan);text-align:right}

/* ============ SCENARIOS ============ */
.scen{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.scard{
  border:1px solid var(--edge);border-radius:var(--rad);
  background:linear-gradient(165deg,rgba(16,21,34,.9),rgba(8,10,18,.94));
  display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .25s,box-shadow .25s;
}
.scard:hover{border-color:rgba(56,232,255,.3)}
.scard.won{border-color:rgba(69,255,176,.45);box-shadow:0 0 24px rgba(69,255,176,.08)}
.scard__top{padding:16px 18px 10px}
.scard__idx{font-family:var(--mono);font-size:10px;letter-spacing:.26em;color:var(--amber)}
.scard__title{font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin-top:5px}
.scard__ctx{font-size:12.5px;color:var(--dim);margin-top:6px;line-height:1.45;min-height:36px}
.scard__arena{
  position:relative;margin:6px 14px;min-height:150px;border-radius:10px;
  border:1px solid var(--edge);background:rgba(5,6,10,.75);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.scard__timer{
  position:absolute;top:0;left:0;height:3px;width:100%;transform-origin:left;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
}
.scard__play{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;
  padding:9px 18px;border-radius:8px;border:1px dashed rgba(56,232,255,.5);color:var(--cyan);
}
.scard__play:hover{background:rgba(56,232,255,.08)}
.scard__foot{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 16px 14px;font-family:var(--mono);font-size:10px;color:var(--dim);
}
.scard__fact{letter-spacing:.03em;line-height:1.4}
.scard__pts{color:var(--amber);font-weight:700;white-space:nowrap}
.scard__pts.earned{color:var(--good)}

/* scenario internals */
.sc-log{font-family:var(--mono);font-size:9.5px;line-height:1.7;color:var(--dim);padding:8px 10px;width:100%;height:100%;overflow:hidden}
.sc-log div{white-space:nowrap}
.sc-log .hit{color:var(--silver);background:rgba(255,77,94,.14);cursor:pointer;border-left:2px solid var(--red);padding-left:4px}
.sc-log .hit:hover{background:rgba(255,77,94,.28)}
.sc-log .found{color:var(--red);background:rgba(255,77,94,.22)}
.sc-log .sel{background:rgba(56,232,255,.12)}
.sc-fraud{width:100%;padding:10px;font-family:var(--mono)}
.sc-fraud .tx{
  display:flex;justify-content:space-between;gap:8px;
  font-size:11px;padding:8px 10px;border:1px solid var(--edge);border-radius:8px;
  background:rgba(16,21,34,.9);margin-bottom:8px;
}
.sc-fraud .tx.sus{border-color:rgba(255,61,240,.65);box-shadow:0 0 12px rgba(255,61,240,.25)}
.sc-fraud .tx .amt{color:var(--silver)}
.sc-freeze{
  width:100%;padding:8px 14px;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.2em;border-radius:8px;border:1px solid var(--magenta);color:var(--magenta);
}
.sc-freeze:hover{background:rgba(255,61,240,.12)}
.sc-steps{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px}
.sc-opt{
  font-family:var(--mono);font-size:11px;text-align:left;padding:9px 12px;
  border:1px solid var(--edge);border-radius:8px;color:var(--silver);background:rgba(16,21,34,.8);
  transition:border-color .15s,background .15s;
}
.sc-opt:hover{border-color:var(--cyan)}
.sc-opt.right{border-color:var(--good);color:var(--good)}
.sc-opt.wrong{border-color:var(--red);color:var(--red)}
.sc-patience{width:100%;padding:0 12px 10px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.sc-patience .bar{height:6px;border-radius:3px;background:var(--edge);overflow:hidden;margin-top:4px}
.sc-patience .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--amber),var(--red));transition:width .2s}
.sc-shop{width:100%;padding:12px;font-family:var(--mono)}
.sc-shop .q{font-size:11.5px;color:var(--silver);margin-bottom:10px;line-height:1.45}
.sc-shop .opts{display:grid;gap:7px}
.sc-cart{width:100%;padding:0 12px 10px;font-family:var(--mono);font-size:10px;color:var(--dim)}
.sc-cart .bar{height:6px;border-radius:3px;background:var(--edge);overflow:hidden;margin-top:4px}
.sc-cart .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .15s linear}
.sc-lab{width:100%;padding:12px;font-family:var(--mono);display:flex;flex-direction:column;gap:9px}
.sc-lab .hyp{font-size:10.5px;color:var(--dim);border:1px dashed var(--edge);border-radius:8px;padding:8px 10px;min-height:34px;line-height:1.5}
.sc-lab .hyp b{color:var(--cyan)}
.sc-lab .prog{height:8px;border-radius:4px;background:var(--edge);overflow:hidden}
.sc-lab .prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .15s linear}
.sc-lab .loop{font-size:9.5px;color:var(--dim);letter-spacing:.12em}
.sc-iterate{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;
  padding:9px;border-radius:8px;border:1px solid var(--cyan);color:var(--cyan);
}
.sc-iterate:hover{background:rgba(56,232,255,.1)}
.sc-msg{position:absolute;inset:0;display:grid;place-items:center;background:rgba(5,6,10,.88);font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-align:center;padding:12px;z-index:2}
.sc-msg.win{color:var(--good)}
.sc-msg.lose{color:var(--red)}

/* ============ RUSH ============ */
.rush__frame{
  position:relative;border:1px solid var(--edge);border-radius:var(--rad);
  overflow:hidden;background:#04050a;
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 60px rgba(139,92,255,.06);
}
#rushCanvas{width:100%;height:clamp(420px,68vh,640px);touch-action:none}
.rush__overlay{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;
  background:rgba(4,5,10,.82);backdrop-filter:blur(4px);
}
.rush__overlay[hidden]{display:none}
.rush__overlay-title{
  font-size:clamp(30px,5vw,54px);font-weight:700;letter-spacing:.06em;
  background:linear-gradient(92deg,var(--cyan),var(--violet),var(--magenta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rush__overlay-sub{color:var(--dim);font-size:14px;max-width:420px}
.rush__keys{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--dim)}
.rush__keys kbd{
  border:1px solid var(--edge);border-bottom-width:2px;border-radius:5px;
  padding:2px 7px;background:var(--ink-3);color:var(--silver);font-family:var(--mono);font-size:10px;
}
.rush__hud{
  position:absolute;top:10px;left:12px;right:12px;z-index:3;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.08em;
  pointer-events:none;
}
.rush__stat b{color:var(--silver);font-variant-numeric:tabular-nums}
.rush__lives{color:var(--magenta);letter-spacing:.2em;margin-left:auto}
.rush__tps{color:var(--cyan)}
.rush__touch{
  position:absolute;bottom:12px;left:0;right:0;z-index:3;
  display:none;justify-content:space-between;padding:0 14px;pointer-events:none;
}
.rush__tbtn{
  pointer-events:auto;width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(56,232,255,.4);color:var(--cyan);font-size:20px;
  background:rgba(10,13,22,.7);backdrop-filter:blur(3px);
  -webkit-tap-highlight-color:transparent;user-select:none;touch-action:none;
}
.rush__tbtn:active{background:rgba(56,232,255,.22)}
.rush__caption{margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-align:center}
.tk-sol{color:var(--cyan)} .tk-cache{color:var(--amber)} .tk-spike{color:var(--magenta)}

/* ============ QUIZ ============ */
.quiz__frame{max-width:720px;margin:0 auto}
.quiz__card{
  border:1px solid var(--edge);border-radius:var(--rad);
  background:linear-gradient(165deg,rgba(16,21,34,.92),rgba(8,10,18,.95));
  padding:26px clamp(18px,4vw,34px);min-height:340px;
}
.q__meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;color:var(--dim);letter-spacing:.16em;margin-bottom:18px}
.q__meta .q__score{color:var(--amber)}
.q__q{font-size:clamp(17px,2.4vw,22px);font-weight:700;line-height:1.3;margin-bottom:20px}
.q__opts{display:grid;gap:9px}
.q__opt{
  font-family:var(--mono);font-size:13px;text-align:left;color:var(--silver);
  border:1px solid var(--edge);border-radius:9px;padding:12px 14px;
  display:flex;gap:12px;align-items:center;background:rgba(5,6,10,.5);
  transition:border-color .15s,background .15s,transform .1s;
}
.q__opt:hover:not(:disabled){border-color:var(--cyan);transform:translateX(3px)}
.q__opt .k{color:var(--dim);font-size:10px;border:1px solid var(--edge);border-radius:4px;padding:1px 6px}
.q__opt.correct{border-color:var(--good);background:rgba(69,255,176,.1);color:var(--good)}
.q__opt.wrong{border-color:var(--red);background:rgba(255,77,94,.1);color:var(--red)}
.q__opt:disabled{cursor:default;opacity:.85}
.q__feed{margin-top:16px;font-family:var(--mono);font-size:11px;min-height:18px;color:var(--dim)}
.q__feed b{color:var(--good)}
.q__feed .bad{color:var(--red)}
.q__next{margin-top:14px}
.q__final{text-align:center;padding:18px 0}
.q__rank{
  font-size:clamp(26px,4vw,40px);font-weight:700;letter-spacing:.04em;margin:12px 0;
  background:linear-gradient(92deg,var(--amber),var(--magenta),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.q__summary{font-family:var(--mono);font-size:12px;color:var(--dim);line-height:1.8}
.q__summary b{color:var(--silver)}
.q__medal{font-size:44px;line-height:1;filter:drop-shadow(0 0 18px rgba(56,232,255,.5))}
.q__streakbar{height:4px;border-radius:2px;background:var(--edge);overflow:hidden;margin:8px 0 18px}
.q__streakbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta));transition:width .3s}

/* ============ PARTNERS ============ */
.quote{
  max-width:760px;border-left:3px solid var(--amber);padding:6px 0 6px 24px;
  font-size:clamp(17px,2.4vw,23px);line-height:1.5;color:var(--silver);
}
.quote footer{margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.quote footer b{color:var(--amber)}
.partners__chips{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}
.pchip{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.2em;
  border:1px solid var(--edge);border-radius:8px;padding:10px 18px;color:var(--silver);
  background:linear-gradient(150deg,rgba(16,21,34,.9),rgba(10,13,22,.9));
  transition:border-color .2s,color .2s;
}
.pchip:hover{border-color:var(--cyan);color:var(--cyan)}
.partners__grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pcard{
  border:1px solid var(--edge);border-radius:var(--rad);padding:20px;
  background:rgba(16,21,34,.7);
}
.pcard h3{font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--cyan);margin-bottom:12px}
.pcard p{font-size:14px;color:var(--dim);line-height:1.6}
.pcard p b{color:var(--silver)}
.pcard--avail{border-color:rgba(255,179,64,.35)}
.pcard .btn{margin-top:14px;display:inline-block}

/* ============ FOOTER ============ */
.footer{
  border-top:1px solid var(--edge);padding:34px clamp(18px,5vw,64px) 46px;
  max-width:1280px;margin:0 auto;
}
.footer__line{font-size:12.5px;color:var(--dim);max-width:640px;line-height:1.6}
.footer__sig{margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--dim)}
@media (max-width:640px){.footer__sig{letter-spacing:.14em;line-height:1.8}}

/* ============ TOAST ============ */
.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:120;font-family:var(--mono);font-size:12px;letter-spacing:.1em;
  background:rgba(10,13,22,.95);border:1px solid var(--amber);color:var(--amber);
  border-radius:10px;padding:11px 20px;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;box-shadow:0 8px 30px rgba(0,0,0,.6);
  max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ============ RESPONSIVE ============ */
@media (max-width:900px){
  .hud__menu{display:grid;place-items:center}
  .hud__nav{display:none}
  .hud__nav.open{
    display:flex;position:fixed;top:var(--hud-h);left:0;right:0;z-index:99;
    flex-direction:column;background:rgba(5,6,10,.97);border-bottom:1px solid var(--edge);
    padding:10px;backdrop-filter:blur(12px);
  }
  .hud__nav.open a{padding:12px 16px;font-size:13px}
}
@media (max-width:640px){
  .section{padding:80px 16px 60px}
  .hero{padding-left:16px;padding-right:16px}
  .hero__title{font-size:clamp(36px,11vw,54px)}
  .stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
  .stat{min-height:150px}
  .stat__num{font-size:26px}
  .race__hint{display:none}
  .waferwrap__hud{max-width:78vw}
  .waferwrap__fact{font-size:12.5px}
  .sbar{grid-template-columns:96px 1fr 56px;gap:10px}
  .scen{grid-template-columns:1fr}
  #rushCanvas{height:min(66vh,520px)}
  .rush__touch{display:flex}
  .rush__keys{display:none}
  .hud__score-label{display:none}
  .quiz__card{min-height:300px}
}
@media (hover:none) and (pointer:coarse){
  .rush__touch{display:flex}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero__cursor,.hud__waferdot,.hero__scrollcue span{animation:none}
  .race__tokens i{animation:none;opacity:0}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
}
