:root{--bg: #080b11;--panel: rgba(12, 17, 25, .86);--panel-solid: #0c1119;--line: rgba(120, 160, 200, .18);--text: #e9f0f8;--muted: #8fa2b8;--pink: #ff2d6f;--cyan: #25f4ff;--lime: #8bff5c;--gold: #ffcf3f;--silver: #cfd8e6;--bronze: #d18445;--radius: 14px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--safe-r: env(safe-area-inset-right, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#ui{position:fixed;inset:0;pointer-events:none;z-index:10}#ui>*{pointer-events:auto}.noscript{position:fixed;inset:0;display:grid;place-items:center;font-family:var(--sans);color:#e9f0f8;background:#080b11}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}.btn{--btn-accent: var(--cyan);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;min-height:50px;font-size:15px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text);background:#ffffff0b;border:1px solid var(--line);border-radius:11px;transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}.btn:before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px;background:var(--btn-accent);opacity:0;transition:opacity .16s ease}.btn:hover,.btn:focus-visible{background:#ffffff17;border-color:color-mix(in srgb,var(--btn-accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--btn-accent) 22%,transparent),0 12px 34px #00000073;outline:none}.btn:hover:before,.btn:focus-visible:before{opacity:1}.btn:active{transform:translateY(1px) scale(.995)}.btn--primary{--btn-accent: var(--pink);background:linear-gradient(135deg,#ff2d6f3d,#25f4ff24);border-color:#ff2d6f80;font-size:17px;padding:17px 40px;min-height:58px}.btn--ghost{background:transparent}.btn--sm{padding:9px 16px;min-height:38px;font-size:12.5px}.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(28px + var(--safe-t)) calc(28px + var(--safe-r)) calc(28px + var(--safe-b)) calc(28px + var(--safe-l));background:radial-gradient(1100px 620px at 50% -10%,rgba(255,45,111,.16),transparent 62%),radial-gradient(900px 560px at 88% 108%,rgba(37,244,255,.13),transparent 60%),#06090ee6;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);overflow-y:auto;overscroll-behavior:contain;animation:screen-in .26s ease both}@keyframes screen-in{0%{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}.screen--center{align-items:center;justify-content:center}.screen[hidden]{display:none!important}.screen__head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:22px}.screen__title{margin:0;font-size:clamp(26px,4.4vw,42px);font-weight:900;letter-spacing:-.02em}.screen__sub{color:var(--muted);font-size:14px;letter-spacing:.03em}.screen__body{flex:1;min-height:0}.screen__foot{display:flex;gap:12px;flex-wrap:wrap;padding-top:22px}.title-screen{align-items:center;justify-content:center;text-align:center}.title-screen:before{content:"";position:absolute;inset:0;background-image:url(/assets/keyart.jpg);background-size:cover;background-position:center;opacity:.3;mask-image:radial-gradient(ellipse 78% 68% at 50% 46%,transparent 18%,#000 78%);-webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 46%,transparent 18%,#000 78%);pointer-events:none;z-index:-1}.wordmark{font-size:clamp(48px,13vw,132px);font-weight:900;letter-spacing:-.045em;line-height:.86;margin:0;background:linear-gradient(102deg,#fff 8%,var(--pink) 44%,var(--cyan) 88%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 10px 40px rgba(255,45,111,.32))}.wordmark__sub{margin:14px 0 0;font-size:clamp(12px,1.6vw,15px);letter-spacing:.42em;text-transform:uppercase;color:var(--muted);padding-left:.42em}.title-actions{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:44px;width:min(340px,84vw)}.title-actions .btn{width:100%}.title-hint{margin-top:30px;font-size:12.5px;color:var(--muted);letter-spacing:.05em;max-width:460px;line-height:1.7}.kbd{display:inline-block;padding:2px 7px;margin:0 2px;font-family:var(--mono);font-size:11px;background:#ffffff14;border:1px solid var(--line);border-radius:5px}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:15px;padding-bottom:8px}.track-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:18px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.track-card:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 55%,rgba(37,244,255,.1));opacity:0;transition:opacity .18s ease;pointer-events:none}.track-card:hover,.track-card:focus-visible{transform:translateY(-3px);border-color:#25f4ff6b;box-shadow:0 18px 44px #00000080;outline:none}.track-card:hover:after,.track-card:focus-visible:after{opacity:1}.track-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.track-card__name{font-size:19px;font-weight:800;letter-spacing:-.01em}.track-card__sub{font-size:12.5px;color:var(--muted);margin-top:3px}.track-card__stats{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px}.track-card__best{color:var(--cyan)}.track-card__best--none{color:var(--muted)}.pill{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}.pill--easy{background:#8bff5c24;color:var(--lime)}.pill--medium{background:#25f4ff24;color:var(--cyan)}.pill--hard{background:#ffcf3f24;color:var(--gold)}.pill--expert{background:#ff2d6f29;color:var(--pink)}.medal-dot{width:15px;height:15px;border-radius:50%;display:inline-block;box-shadow:inset 0 -2px 4px #0006}.medal-dot--author{background:var(--cyan)}.medal-dot--gold{background:var(--gold)}.medal-dot--silver{background:var(--silver)}.medal-dot--bronze{background:var(--bronze)}.medal-dot--none{background:#ffffff1a}.settings-list{display:flex;flex-direction:column;gap:4px;max-width:640px}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;background:var(--panel);border:1px solid transparent;border-radius:11px;transition:border-color .15s ease}.setting:hover{border-color:var(--line)}.setting__label{font-size:14.5px;font-weight:600}.setting__hint{font-size:12px;color:var(--muted);margin-top:3px}.setting__control{display:flex;align-items:center;gap:12px;flex-shrink:0}.setting__value{font-family:var(--mono);font-size:12.5px;color:var(--cyan);min-width:42px;text-align:right}input[type=range]{-webkit-appearance:none;appearance:none;width:150px;height:4px;border-radius:4px;background:#ffffff24;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--cyan);cursor:pointer;box-shadow:0 0 12px #25f4ff8c}input[type=range]::-moz-range-thumb{width:17px;height:17px;border:none;border-radius:50%;background:var(--cyan);cursor:pointer}.seg{display:inline-flex;padding:3px;gap:3px;background:#ffffff0d;border-radius:9px}.seg__opt{padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-radius:7px;transition:background .14s ease,color .14s ease}.seg__opt[aria-pressed=true]{background:#25f4ff2b;color:var(--cyan)}.toggle{position:relative;width:46px;height:26px;border-radius:999px;background:#ffffff21;transition:background .18s ease}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.4,0,.2,1)}.toggle[aria-pressed=true]{background:var(--cyan)}.toggle[aria-pressed=true]:after{transform:translate(20px)}.hud{position:absolute;inset:0;pointer-events:none;padding:calc(18px + var(--safe-t)) calc(20px + var(--safe-r)) calc(18px + var(--safe-b)) calc(20px + var(--safe-l));font-variant-numeric:tabular-nums}.hud[hidden]{display:none}.hud__timer{position:absolute;top:calc(18px + var(--safe-t));left:calc(20px + var(--safe-l))}.timer__value{font-family:var(--mono);font-size:clamp(30px,5.2vw,50px);font-weight:700;letter-spacing:-.025em;line-height:1;text-shadow:0 3px 22px rgba(0,0,0,.75)}.timer__best{margin-top:5px;font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em}.timer__best b{color:var(--cyan);font-weight:600}.delta{position:absolute;top:calc(96px + var(--safe-t));left:calc(20px + var(--safe-l));font-family:var(--mono);font-size:26px;font-weight:700;opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease}.delta.is-show{opacity:1;transform:none}.delta--ahead{color:var(--lime)}.delta--behind{color:var(--pink)}.hud__checkpoints{position:absolute;top:calc(20px + var(--safe-t));left:50%;transform:translate(-50%);text-align:center}.cp__count{font-family:var(--mono);font-size:17px;letter-spacing:.1em;color:var(--text);text-shadow:0 2px 14px rgba(0,0,0,.8)}.cp__label{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:3px}.progress{width:min(300px,52vw);height:3px;margin-top:9px;border-radius:3px;background:#ffffff26;overflow:hidden}.progress__fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--pink),var(--cyan));transform-origin:left;transition:transform .1s linear}.hud__speed{position:absolute;right:calc(20px + var(--safe-r));bottom:calc(16px + var(--safe-b));width:188px;height:188px;display:grid;place-items:center;text-shadow:0 3px 22px rgba(0,0,0,.8)}.gauge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:rotate(0)}.gauge__track,.gauge__fill{fill:none;stroke-linecap:round;stroke-width:7}.gauge__track{stroke:#e9f0f821}.gauge__fill{stroke:url(#gaugeGrad);transition:stroke-dashoffset .08s linear;filter:drop-shadow(0 0 7px rgba(37,244,255,.45))}.speed__readout{display:flex;flex-direction:column;align-items:center;line-height:1}.speed__value{font-family:var(--mono);font-size:clamp(34px,5.4vw,56px);font-weight:800;line-height:.9;letter-spacing:-.045em;transition:color .2s ease}.speed__value.is-boost{color:var(--cyan)}.speed__unit{font-size:11px;letter-spacing:.22em;color:var(--muted);margin-top:5px}.rev{position:absolute;right:calc(20px + var(--safe-r));bottom:calc(212px + var(--safe-b));width:188px;height:5px;border-radius:4px;background:#ffffff1f;overflow:hidden}.rev__fill{height:100%;background:linear-gradient(90deg,var(--cyan) 0%,var(--lime) 55%,var(--gold) 78%,var(--pink) 100%);transform-origin:left;transform:scaleX(0);transition:transform .06s linear}.hud__center{position:absolute;inset:0;display:grid;place-items:center;text-align:center}.countdown{font-size:clamp(80px,18vw,190px);font-weight:900;letter-spacing:-.05em;line-height:1;color:#fff;text-shadow:0 0 60px rgba(255,45,111,.7);animation:count-pop .5s cubic-bezier(.2,1.4,.4,1) both}.countdown--go{color:var(--lime);text-shadow:0 0 70px rgba(139,255,92,.8)}@keyframes count-pop{0%{transform:scale(1.7);opacity:0}55%{opacity:1}to{transform:scale(1);opacity:.9}}.toast{position:absolute;top:22%;left:50%;transform:translate(-50%);padding:11px 22px;border-radius:999px;background:#0a0f16e6;border:1px solid var(--line);font-size:13.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:0;transition:opacity .25s ease}.toast.is-show{opacity:1}.hud__fps{position:absolute;bottom:calc(18px + var(--safe-b));left:calc(20px + var(--safe-l));font-family:var(--mono);font-size:11.5px;color:var(--muted)}.hud__hint{position:absolute;bottom:calc(18px + var(--safe-b));left:50%;transform:translate(-50%);font-size:11.5px;letter-spacing:.09em;color:var(--muted);text-align:center;white-space:nowrap}.result{width:min(480px,92vw);margin:auto;padding:34px;background:var(--panel-solid);border:1px solid var(--line);border-radius:20px;text-align:center;box-shadow:0 30px 90px #000000a6}.result__medal{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900;color:#0a0d13;box-shadow:inset 0 -5px 12px #0000004d}.result__label{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}.result__time{font-family:var(--mono);font-size:clamp(38px,8vw,58px);font-weight:800;letter-spacing:-.035em;margin:6px 0 4px}.result__delta{font-family:var(--mono);font-size:15px;margin-bottom:22px}.result__rows{text-align:left;margin:20px 0}.result__row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}.result__row span:last-child{font-family:var(--mono);color:var(--cyan)}.result__actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}.record-flag{display:inline-block;padding:5px 13px;margin-bottom:14px;border-radius:999px;background:#8bff5c29;color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.touch-controls{position:absolute;inset:0;z-index:5;pointer-events:none;touch-action:none}.touch-controls[hidden]{display:none}.touch-controls>*{pointer-events:auto}.touch-left{position:absolute;left:calc(16px + var(--safe-l));bottom:calc(20px + var(--safe-b));width:min(42vw,340px)}.touch-steer{position:relative;height:92px;border-radius:20px;background:#0a101880;border:1px solid var(--line);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overflow:hidden;transition:border-color .15s ease,background .15s ease}.touch-steer.is-active{border-color:#25f4ff80;background:#0c16209e}.touch-steer-track{position:absolute;inset:0;display:grid;place-items:center}.touch-steer-hint{font-size:10.5px;letter-spacing:.3em;color:#8fa2b880;text-transform:uppercase}.touch-steer-knob{position:absolute;left:50%;top:10px;bottom:10px;width:72px;margin-left:-36px;border-radius:14px;background:linear-gradient(180deg,#25f4ff4d,#25f4ff24);border:1px solid rgba(37,244,255,.45);transition:transform .05s linear;pointer-events:none}.touch-right{position:absolute;right:calc(16px + var(--safe-r));bottom:calc(20px + var(--safe-b));display:grid;grid-template-columns:auto auto;grid-template-areas:"brake gas" "drift gas";gap:10px;align-items:end}.touch-btn{display:grid;place-items:center;border-radius:18px;background:#0a101880;border:1px solid var(--line);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);font-size:11.5px;font-weight:800;letter-spacing:.13em;color:var(--text);transition:transform .08s ease,background .1s ease,border-color .1s ease;user-select:none;-webkit-user-select:none}.touch-btn.is-down{transform:scale(.94)}.touch-gas{grid-area:gas;width:112px;height:112px;border-radius:50%;font-size:13px;border-color:#8bff5c5c;background:radial-gradient(circle at 50% 40%,#8bff5c38,#0a10188c)}.touch-gas.is-down{background:radial-gradient(circle at 50% 40%,#8bff5c6b,#0a101899);border-color:var(--lime)}.touch-brake{grid-area:brake;width:88px;height:60px;border-color:#ff2d6f57}.touch-brake.is-down{background:#ff2d6f47;border-color:var(--pink)}.touch-handbrake{grid-area:drift;width:88px;height:52px;border-color:#ffcf3f52}.touch-handbrake.is-down{background:#ffcf3f42;border-color:var(--gold)}.touch-corner{position:absolute;top:calc(14px + var(--safe-t));right:calc(16px + var(--safe-r));display:flex;gap:8px}.touch-corner .touch-btn{width:46px;height:46px;border-radius:13px;font-size:15px}@media (max-width: 760px){.screen{padding:calc(20px + var(--safe-t)) calc(18px + var(--safe-r)) calc(20px + var(--safe-b)) calc(18px + var(--safe-l))}.track-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}.setting{flex-direction:column;align-items:flex-start;gap:12px}.setting__control{width:100%;justify-content:space-between}input[type=range]{width:100%;flex:1}.hud__hint{display:none}}@media (max-height: 480px) and (orientation: landscape){.timer__value{font-size:27px}.speed__value{font-size:40px}.hud__speed{width:132px;height:132px}.rev{bottom:calc(152px + var(--safe-b));width:132px}.touch-gas{width:92px;height:92px}.touch-steer{height:76px}.hud__fps{display:none}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
