:root{color-scheme:dark;--cyan:#62efff;--accent:#62efff;--ice:#eaf5ff;--sub:#a6b6cf;--muted:#8499b6;--line:rgba(136,182,218,.22);--panel:rgba(8,14,30,.86);--mono:"JetBrains Mono",Consolas,"SFMono-Regular",monospace;--sans:Inter,"Segoe UI",Arial,sans-serif;--gold:#ffd36b}
*{box-sizing:border-box} [hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#060918;color:var(--ice);font-family:var(--sans);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button{font:inherit;cursor:pointer;touch-action:manipulation} button:focus-visible{outline:2px solid white;outline-offset:4px}
svg{width:20px;height:20px;flex:none}
#world,.shade,.vignette,.flash{position:fixed;inset:0;width:100%;height:100%;display:block}
#world{touch-action:none;outline:none}
.shade{pointer-events:none;background:linear-gradient(180deg,rgba(5,8,19,.55),transparent 22%,transparent 78%,rgba(5,8,19,.75))}
body[data-state=ready] .shade,body[data-state=loading] .shade,body[data-state=error] .shade{background:linear-gradient(90deg,#060918 1%,rgba(6,9,24,.92) 23%,rgba(6,9,24,.55) 40%,transparent 66%),linear-gradient(180deg,rgba(6,9,24,.7),transparent 25%,transparent 72%,#060918)}
body[data-state=crashed] .shade,body[data-state=paused] .shade{background:rgba(4,7,18,.58);transition:background .4s}
.vignette{pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(255,40,90,.45) 100%)}
.vignette.shield{opacity:1;background:radial-gradient(ellipse at 50% 55%,transparent 58%,rgba(90,168,255,.22) 100%)}
.flash{pointer-events:none;opacity:0;background:#fff;mix-blend-mode:screen}
.shell{position:fixed;inset:0;pointer-events:none;--edge:clamp(20px,4.3vw,72px)} .shell button,.shell input,.mix{pointer-events:auto}
.top{position:absolute;left:var(--edge);right:var(--edge);top:max(20px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;align-items:center;gap:11px;font:800 12px var(--sans);letter-spacing:.18em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:36px;height:36px;border:1px solid #367585;border-radius:7px;background:#0a2031;color:var(--cyan);box-shadow:0 0 16px #3addef33}
.brand-mark svg{width:19px;height:19px;fill:currentColor;stroke:none}
.top-tools{display:flex;align-items:center;gap:8px}.top-status{font:700 10px var(--mono);letter-spacing:.12em;color:var(--sub);margin-right:10px;white-space:nowrap}
.dot{display:inline-block;width:7px;height:7px;background:#58f6c5;border-radius:50%;box-shadow:0 0 12px #43f8d6;margin-right:8px;vertical-align:1px}
body[data-state=crashed] .dot{background:#ff5d82;box-shadow:0 0 12px #ff5d82}
.icon-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ice);backdrop-filter:blur(6px)}.icon-btn:hover,.icon-btn[aria-expanded=true]{border-color:var(--cyan);color:var(--cyan)}
.mix{position:absolute;right:var(--edge);top:calc(max(20px,env(safe-area-inset-top)) + 48px);width:min(290px,calc(100% - 32px));padding:16px 16px 12px;border:1px solid #2d6575;border-radius:10px;background:rgba(8,14,30,.94);box-shadow:0 14px 50px #0008;z-index:5}
.mix .eyebrow{margin-bottom:12px}.mix-row{display:grid;grid-template-columns:62px 1fr 34px;align-items:center;gap:10px;margin:8px 0;font:700 11px var(--mono);letter-spacing:.06em;color:var(--sub)}
.mix-row b{text-align:right;color:var(--ice)}.mix-row input{width:100%;accent-color:var(--cyan)}.mix-note{margin:10px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}
.telemetry{position:absolute;left:var(--edge);top:calc(max(20px,env(safe-area-inset-top)) + 56px);opacity:0;transform:translateY(-6px);transition:opacity .35s,transform .35s}
body[data-state=running] .telemetry,body[data-state=paused] .telemetry,body[data-state=crashed] .telemetry{opacity:1;transform:none}
.hud{display:flex;gap:8px;align-items:stretch}
.metric{position:relative;min-width:126px;padding:11px 13px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);backdrop-filter:blur(6px)}
.label{display:block;color:var(--sub);font:700 10px var(--mono);letter-spacing:.1em;white-space:nowrap}
.metric strong{font:700 25px/1.25 var(--mono);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.distance-metric{min-width:190px;border-color:#2d6575}.distance-metric strong{font-size:34px;color:var(--cyan);text-shadow:0 0 18px #3addef55}
.distance-metric.record{border-color:var(--gold);box-shadow:0 0 22px #ffd36b33}.distance-metric.record strong{color:var(--gold);text-shadow:0 0 18px #ffd36b66}
.best-track{height:3px;margin-top:6px;background:#173246;border-radius:2px;overflow:hidden}.best-fill{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--gold));transform-origin:left}
.best-line{display:block;margin-top:5px;font:700 10px var(--mono);letter-spacing:.1em;color:var(--sub)}.best-line b{color:var(--ice)}
.unit{font:700 10px var(--mono);color:var(--sub);margin-left:5px}
#multiplier{display:inline-block;transition:color .2s,transform .2s}#multiplier.hot{color:#5effc8;text-shadow:0 0 10px #5effc888}#multiplier.pop{transform:scale(1.35)}
.combo-track{height:2px;margin-top:6px;background:#173246;overflow:hidden}.combo-fill{display:block;height:100%;width:100%;background:#5effc8;box-shadow:0 0 6px #5effc8;transform:scaleX(0);transform-origin:left}
.rate-meter{display:flex;gap:3px;margin-top:6px}.rate-meter i{width:12px;height:2px;background:#234456}.rate-meter .on{background:var(--cyan);box-shadow:0 0 6px #3addef77}
.powers{display:flex;gap:8px;margin-top:8px}
.power{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel);font:700 10px var(--mono);letter-spacing:.1em;animation:chip-in .3s ease-out}
.power i{display:block;width:14px;height:14px;border-radius:3px}.power.shield{border-color:#5aa8ff88}.power.shield i{background:#5aa8ff;box-shadow:0 0 10px #5aa8ff}
.power.magnet{border-color:#ff5fd288}.power.magnet i{background:#ff5fd2;box-shadow:0 0 10px #ff5fd2}
.power .t{display:block;width:46px;height:2px;margin-top:4px;background:#ffffff22}.power .t span{display:block;height:100%;background:currentColor;transform-origin:left}
.power.ending{animation:blink .25s steps(2) infinite}
@keyframes chip-in{from{opacity:0;transform:translateY(-6px)}}@keyframes blink{50%{opacity:.35}}
.hero{position:absolute;top:47%;left:var(--edge);transform:translateY(-40%);max-width:min(720px,64vw)}
.eyebrow{display:flex;align-items:center;gap:11px;color:var(--cyan);font:700 11px var(--mono);letter-spacing:.21em;text-transform:uppercase;margin:0 0 18px}
.eyebrow:before{content:"";width:28px;height:1px;background:currentColor;box-shadow:0 0 8px currentColor}
h1{font-size:clamp(54px,8.3vw,140px);font-weight:900;letter-spacing:-.07em;line-height:.83;margin:0;text-transform:uppercase}
h1 span{display:block;white-space:nowrap}.hero h1 .accent{font-size:.63em;letter-spacing:-.055em;color:var(--cyan);margin-top:.2em;text-shadow:0 0 34px #33bbff55}
.deck{font-size:clamp(14px,1.25vw,18px);color:var(--sub);line-height:1.55;margin:24px 0 25px;max-width:440px}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:0 21px;border:1px solid #97f8ff;border-radius:6px;background:#65efff;color:#051422;font-weight:900;font-size:14px;box-shadow:0 0 28px #40daff44;transition:background .15s,box-shadow .15s,opacity .2s}
.cta:hover{background:#a0f7ff;box-shadow:0 0 34px #55eaff66}.cta:disabled{opacity:.55;cursor:progress}.cta svg{width:18px;height:18px}
.hint{color:var(--sub);font:700 11px var(--mono);letter-spacing:.03em;margin-left:13px;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:22px;font:700 10px var(--mono);letter-spacing:.1em;color:var(--sub);text-transform:uppercase}
.legend span{display:flex;align-items:center;gap:7px}.sw{display:block;width:10px;height:10px;border-radius:2px}
.sw.packet{background:#3cffcb;box-shadow:0 0 8px #3cffcb;transform:rotate(45deg) scale(.85)}.sw.fire{background:#ff2d55;box-shadow:0 0 8px #ff2d55}.sw.beam{height:3px;background:#ffb13b;box-shadow:0 0 8px #ffb13b}
.sw.block{background:#ff3fb4;box-shadow:0 0 8px #ff3fb4}.sw.shield{background:#5aa8ff;box-shadow:0 0 8px #5aa8ff;border-radius:50%}.sw.magnet{background:#ff5fd2;box-shadow:0 0 8px #ff5fd2;border-radius:50%}
.signal{position:absolute;right:var(--edge);top:26%;display:flex;gap:12px;align-items:center;color:#a2d1e8;font:700 10px var(--mono);letter-spacing:.16em}
.signal:before{content:"";width:32px;height:12px;border-left:1px solid #467b95;border-top:1px solid #467b95}
.bottom{position:absolute;left:var(--edge);right:var(--edge);bottom:max(18px,env(safe-area-inset-bottom));display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.guide{display:flex;gap:8px}.guide-card{min-width:126px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.guide-card.compact{min-width:79px}.guide-card b{display:block;font:700 10px var(--mono);letter-spacing:.12em;color:var(--sub);margin-bottom:7px}.keys{display:flex;gap:4px;align-items:center;white-space:nowrap}
body[data-state=running] .guide{opacity:.55}
kbd{font:700 11px var(--mono);min-width:20px;padding:2px 4px;text-align:center;border:1px solid #3b536e;border-bottom-width:2px;border-radius:3px;background:#121f33;color:#eef8ff}.slash{font:10px var(--mono);color:var(--muted);margin:0 1px}
.best{text-align:right;color:var(--sub);font:700 10px var(--mono);letter-spacing:.14em;white-space:nowrap}.best strong{display:block;margin-top:5px;color:var(--ice);font:700 19px var(--mono);letter-spacing:0}.best small{font-size:10px;color:var(--sub)}
body[data-state=running] .best{opacity:0}
.dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(460px,calc(100% - 30px));max-height:calc(100% - 24px);overflow:auto;padding:28px;border:1px solid #376274;border-radius:12px;background:rgba(9,15,33,.95);box-shadow:0 18px 80px #0009;pointer-events:auto;animation:pop-in .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes pop-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}}
.dialog h2{margin:0;font-size:clamp(28px,6vw,44px);letter-spacing:-.05em;line-height:1}.dialog .eyebrow{margin-bottom:12px}.dialog p:not(.eyebrow){color:var(--sub);line-height:1.5}
.dialog[data-kind=crashed]{border-color:#8c425c}.dialog[data-kind=crashed] .eyebrow{color:#ff829e}
.run-summary{margin:16px 0 4px}.big-distance{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px}.big-distance strong{font:800 clamp(48px,11vw,72px)/1 var(--mono);letter-spacing:-.06em;color:var(--cyan);text-shadow:0 0 26px #3addef55}
.big-distance span{font:700 16px var(--mono);color:var(--sub)}.big-distance em{font:800 11px var(--mono);font-style:normal;letter-spacing:.14em;padding:5px 8px;border-radius:4px;background:var(--gold);color:#241500;box-shadow:0 0 22px #ffd36b66;align-self:center;animation:blink .5s steps(2) 4}
.run-summary.record .big-distance strong{color:var(--gold);text-shadow:0 0 26px #ffd36b77}
.best-compare{margin:6px 0 0;font:700 12px var(--mono);letter-spacing:.04em}
.result{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 18px}
.result div{border:1px solid var(--line);border-radius:5px;padding:9px}.result strong{display:block;margin-top:5px;font:700 18px var(--mono)}
.touch{display:none;gap:7px}.touch button{min-width:54px;min-height:50px;background:var(--panel);border:1px solid #3c6276;border-radius:8px;color:var(--ice);font:700 18px var(--mono)}.touch button span{display:block;font:700 8px var(--mono);letter-spacing:.08em;margin-bottom:3px}
.touch button.held{border-color:var(--cyan);background:#123049}
.popups{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.pop{position:absolute;left:0;top:0;white-space:nowrap;font:800 15px var(--mono);letter-spacing:.04em;text-shadow:0 0 12px currentColor;will-change:transform,opacity;animation:float-up .9s ease-out forwards}
.pop.big{font-size:20px}.pop small{display:block;font-size:10px;letter-spacing:.14em;opacity:.85}
@keyframes float-up{0%{opacity:0;transform:translate(var(--x),var(--y)) translate(-50%,0) scale(.7)}15%{opacity:1;transform:translate(var(--x),var(--y)) translate(-50%,-14px) scale(1.08)}100%{opacity:0;transform:translate(var(--x),var(--y)) translate(-50%,-62px) scale(1)}}
.banner{position:absolute;left:50%;top:24%;transform:translateX(-50%);text-align:center;white-space:nowrap;animation:banner 1.8s cubic-bezier(.2,.9,.3,1) forwards}
.banner b{display:block;font:900 clamp(34px,6vw,64px)/1 var(--sans);letter-spacing:-.05em;text-transform:uppercase;text-shadow:0 0 30px currentColor}
.banner small{display:block;margin-top:8px;font:700 11px var(--mono);letter-spacing:.24em;color:var(--ice);opacity:.85}
@keyframes banner{0%{opacity:0;transform:translateX(-50%) scale(1.25);filter:blur(6px)}12%{opacity:1;transform:translateX(-50%) scale(1);filter:none}78%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-14px)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.error-msg{color:#ffabc1;max-width:420px;line-height:1.5}
.noscript{position:fixed;left:24px;bottom:24px;color:#ffabc1}
@media(pointer:coarse),(max-width:690px){body[data-state=running] .guide{display:none}body[data-state=running] .touch{display:flex}}
@media(max-width:860px){.rate-metric{display:none}}
@media(max-width:690px){
 .shell{--edge:16px}.top{top:max(14px,env(safe-area-inset-top))}.top-status,.signal{display:none}.brand{font-size:11px}
 .telemetry{top:calc(max(14px,env(safe-area-inset-top)) + 48px);right:var(--edge)}.hud{gap:5px}.metric,.distance-metric{min-width:0;flex:1;padding:8px}.metric strong{font-size:20px}.distance-metric strong{font-size:26px}.label,.unit{font-size:9px}
 .hero{top:auto;bottom:96px;transform:none;max-width:calc(100% - 32px)}h1{font-size:clamp(43px,11.6vw,75px)}.eyebrow{font-size:9px;margin-bottom:14px}.deck{margin:14px 0;font-size:14px;max-width:340px}.cta{min-height:46px}.legend{margin-top:16px;gap:5px 10px;font-size:9px}
 body[data-state=ready] .shade,body[data-state=loading] .shade,body[data-state=error] .shade{background:linear-gradient(180deg,#060918a8,transparent 25%,#06091822 40%,#060918ed 70%,#060918)}
 .guide{gap:5px}.guide-card{min-width:0;padding:7px}.guide-card b{font-size:9px;margin-bottom:5px}.guide-card kbd{font-size:10px;min-width:16px;padding:1px 3px}.guide-card .keys{gap:2px}.guide-card.compact{display:none}.best strong{font-size:16px}.bottom{bottom:max(12px,env(safe-area-inset-bottom))}
 .touch{flex:1;justify-content:space-between}.touch button{flex:1;min-height:56px}
 .pop{font-size:13px}.pop.big{font-size:16px}
 .icon-btn{width:34px;height:34px}#full-btn{display:none}
}
@media(max-height:680px) and (min-width:691px){.hero{top:max(150px,30vh);transform:none}h1{font-size:clamp(46px,10vh,96px)}.deck{margin:14px 0}.eyebrow{margin-bottom:12px}.legend{margin-top:14px}}
@media(max-height:560px) and (min-width:691px){.legend,.signal{display:none}.deck{display:none}}
@media(max-height:575px) and (max-width:690px){.hero{bottom:74px}.deck{margin:8px 0}.legend{display:none}.guide-card{padding:5px}.best{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01s!important}}