:root{--surface:#10131a;--surface-container:#1d2026;--surface-container-high:#272a31;--on-surface:#e1e2eb;--on-surface-variant:#ccc3d7;--outline:#958da1;--primary:#d3bbff;--primary-container:#6d28d9;--on-primary:#3f008d;--secondary:#5de6ff;--fuel:#7bf59b;--fuel-low:#ffb4ab;--r-md:.75rem;--r-lg:1rem;--r-full:9999px;--gutter:16px;--safe:20px;--touch:44px;--display:"Rubik", system-ui, sans-serif;--body:"Inter", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--surface);height:100%;color:var(--on-surface);font-family:var(--body);overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#stage{width:100%;height:100%;display:block;position:fixed;inset:0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.cap{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-surface-variant);font-size:11px;font-weight:700}.wordmark{z-index:3;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.4;font-size:10px;position:fixed;bottom:6px;left:50%;transform:translate(-50%)}.wordmark a{color:var(--on-surface-variant);text-decoration:none}.wordmark a:hover{color:var(--secondary)}.hud{top:max(var(--safe), env(safe-area-inset-top));left:var(--safe);right:var(--safe);z-index:2;gap:var(--gutter);pointer-events:none;align-items:flex-start;display:flex;position:fixed}.readout{background:color-mix(in srgb, var(--surface-container) 88%, transparent);border:1px solid color-mix(in srgb, var(--outline) 26%, transparent);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);gap:4px;min-width:0;padding:8px 14px;display:grid}.readout strong{font-family:var(--display);letter-spacing:.04em;color:var(--secondary);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700}.readout[data-testid=destination]{text-align:right;margin-left:auto}.readout[data-testid=destination] strong{color:var(--on-surface);font-size:15px}.readout.fuel{flex:auto;max-width:260px}.bar{border-radius:var(--r-full);background:#00000073;min-width:84px;height:9px;overflow:hidden}.bar.thin{height:5px}.bar i{border-radius:var(--r-full);background:var(--fuel);height:100%;transition:width .12s linear,background-color .3s;display:block}.route{border-radius:var(--r-full);background:#00000073;min-width:116px;height:6px;position:relative}.route-fill{border-radius:var(--r-full);background:var(--primary);transition:width .12s linear;position:absolute;top:0;bottom:0;left:0}.route-tick{background:var(--outline);opacity:.65;border-radius:1px;width:2px;height:12px;position:absolute;top:-3px;transform:translate(-50%)}.route-me{border-radius:var(--r-full);background:var(--secondary);border:2px solid var(--surface-container);width:11px;height:11px;box-shadow:0 0 12px var(--secondary);transition:left .12s linear;position:absolute;top:50%;transform:translate(-50%,-50%)}.dist{font-family:var(--mono);color:var(--on-surface-variant);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}.readout.fuel[data-low=true] .bar i{background:var(--fuel-low)}.readout.fuel[data-low=true]{animation:.9s ease-in-out infinite pulse}@keyframes pulse{50%{border-color:var(--fuel-low)}}.fact{left:var(--safe);right:var(--safe);bottom:calc(var(--safe) + 108px);z-index:2;border:1px solid var(--secondary);border-radius:var(--r-md);background:color-mix(in srgb, var(--surface-container) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;gap:3px;max-width:340px;padding:12px 14px;font-size:14px;line-height:1.45;animation:.4s both rise;display:grid;position:fixed}.fact[hidden]{display:none}.fact strong{color:var(--secondary);font-family:var(--display)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}}.pedals{left:var(--safe);right:var(--safe);bottom:max(var(--safe), env(safe-area-inset-bottom));z-index:3;pointer-events:none;justify-content:space-between;display:flex;position:fixed}.pedal{pointer-events:auto;width:92px;height:92px;min-width:var(--touch);min-height:var(--touch);border-radius:var(--r-full);font:inherit;cursor:pointer;color:var(--on-surface);border:2px solid color-mix(in srgb, var(--primary) 55%, transparent);background:radial-gradient(circle at 50% 30%, var(--surface-container-high), #241a3d);box-shadow:0 5px 0 #150e26, 0 0 22px color-mix(in srgb, var(--primary) 22%, transparent);place-items:center;gap:1px;transition:transform 70ms,box-shadow 70ms;display:grid}.pedal svg{width:30px;height:30px}.pedal.gas{color:#fff;border-color:var(--primary);background:radial-gradient(circle at 50% 25%, #8b48f0, var(--primary-container));box-shadow:0 5px 0 #3b0f86, 0 0 30px color-mix(in srgb, var(--primary) 45%, transparent);width:104px;height:104px}.pedal.gas .cap{color:#ffffffd1}.pedal[data-down=true]{transform:translateY(4px);box-shadow:0 1px #150e26}.pedal.gas[data-down=true]{box-shadow:0 1px 0 #3b0f86, 0 0 34px var(--primary)}.pedal:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}.screen{z-index:4;padding:var(--safe);text-align:center;background:radial-gradient(circle at 50% 42%,#1d1a2e 0%,#10131a 68%);place-content:center;justify-items:center;gap:22px;display:grid;position:fixed;inset:0}.screen[hidden]{display:none}.opening h1{font-family:var(--display);letter-spacing:-.02em;text-transform:uppercase;color:var(--secondary);text-shadow:0 0 26px color-mix(in srgb, var(--secondary) 55%, transparent);margin:0;font-size:clamp(38px,11vw,68px);font-weight:800;line-height:1}.hero{filter:drop-shadow(0 18px 30px #0000008c);width:min(70vw,340px);height:auto;animation:3.6s ease-in-out infinite bob}@keyframes bob{50%{transform:translateY(-9px)rotate(-1.5deg)}}.primary{font-family:var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);border-radius:var(--r-lg);min-height:var(--touch);cursor:pointer;box-shadow:0 5px 0 #7331df, 0 0 34px color-mix(in srgb, var(--primary) 40%, transparent);border:0;align-items:center;gap:12px;padding:18px 46px;font-size:20px;font-weight:800;transition:transform 80ms,box-shadow 80ms;animation:2.4s ease-in-out infinite breathe;display:inline-flex}.primary svg{width:22px;height:22px}.primary:hover{transform:translateY(-1px)}.primary:active{transform:translateY(4px);box-shadow:0 1px #7331df}.primary:focus-visible{outline:3px solid var(--secondary);outline-offset:4px}@keyframes breathe{50%{box-shadow:0 5px 0 #7331df, 0 0 52px color-mix(in srgb, var(--primary) 70%, transparent)}}@media (prefers-reduced-motion:reduce){.hero,.primary,.readout.fuel{animation:none}}.over{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#10131ad1}.verdict{font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--primary);margin:0;font-size:clamp(30px,9vw,52px);font-weight:800}.tally{align-items:baseline;gap:12px;margin:0;display:flex}.tally strong{font-family:var(--display);color:var(--secondary);font-variant-numeric:tabular-nums;font-size:26px}body[data-phase=opening] .hud,body[data-phase=opening] .pedals,body[data-phase=opening] .wordmark,body[data-phase=intro] .pedals,body[data-phase=intro] .hud,body[data-phase=over] .pedals{visibility:hidden}@media (width<=560px){.hud{flex-wrap:wrap}.readout.fuel{max-width:none}.readout[data-testid=destination]{text-align:left;flex:100%;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;margin-left:0}.readout[data-testid=destination] .cap,.readout[data-testid=destination] strong{grid-row:1}.readout[data-testid=destination] .route{grid-column:1/-1}.readout[data-testid=destination] .dist{text-align:right;grid-column:1/-1}}@media (width>=900px){:root{--safe:32px}.pedal{width:104px;height:104px}.pedal.gas{width:116px;height:116px}.route{min-width:190px}.fact{bottom:calc(var(--safe) + 148px);max-width:380px}}
