:root{--ink: #f4f1ea;--dim: rgba(244, 241, 234, .62);--panel: rgba(12, 14, 18, .46);--line: rgba(244, 241, 234, .16);--accent: #ffb238;--red: #ff3b3b;font-family:Avenir Next,Helvetica Neue,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0d10;color:var(--ink)}#app{position:fixed;inset:0}#app canvas{display:block}#hud{position:fixed;inset:0;pointer-events:none;user-select:none;font-variant-numeric:tabular-nums;text-shadow:0 1px 10px rgba(0,0,0,.45)}.panel{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}.route{top:22px;left:22px;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 14px;max-width:min(520px,calc(100vw - 44px))}.route-shield{flex:none;width:44px;height:46px;display:grid;place-items:center;font-weight:800;font-size:22px;color:#10202a;background:var(--ink);border-radius:8px 8px 20px 20px;box-shadow:inset 0 0 0 2px #10202a,inset 0 0 0 3px var(--ink);text-shadow:none}.route-line{font-size:11px;letter-spacing:.2em;color:var(--dim)}.route-line .dot{margin:0 8px;opacity:.5}#zone-tag{color:var(--accent);font-weight:700}#zone-name{font-size:21px;font-weight:700;letter-spacing:.01em;line-height:1.2;margin-top:2px}#landmark{font-size:13px;color:var(--dim);margin-top:1px}.trip{top:22px;right:22px;width:min(330px,calc(100vw - 44px));padding:10px 16px 14px}.trip-value{text-align:right;font-size:26px;font-weight:700}small{font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--dim);margin-left:6px}.track{position:relative;display:flex;gap:3px;margin-top:6px;height:22px}.track-seg{position:relative;border-top:3px solid var(--line)}.track-seg i{position:absolute;top:6px;left:0;font-style:normal;font-size:9px;letter-spacing:.14em;color:var(--dim);white-space:nowrap}#track-fill{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}#track-dot{position:absolute;top:-4px;left:-5px;width:11px;height:11px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px #ffb23873}.cluster{position:absolute;right:22px;bottom:22px;display:flex;align-items:flex-end;gap:12px}.cluster .panel{position:relative}.lean{width:150px;padding:8px 10px 10px;text-align:center}.lean svg{display:block;width:100%;overflow:visible}.lean-arc{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round}.lean-tick{fill:none;stroke:var(--dim);stroke-width:1.5}.lean-max{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linecap:round}#lean-needle path{stroke:var(--accent);stroke-width:3;stroke-linecap:round}#lean-needle circle{fill:var(--ink)}.lean-read{font-size:18px;font-weight:700;margin-top:-6px}.speed{width:268px;padding:10px 16px}.speed-row{display:flex;align-items:flex-end;justify-content:space-between}#gear{width:46px;height:46px;margin-bottom:9px;display:grid;place-items:center;font-size:28px;font-weight:800;color:var(--accent);border:2px solid var(--accent);border-radius:10px}.speed-num{font-size:62px;font-weight:800;font-style:italic;line-height:1;letter-spacing:-.02em}.rpm{position:relative;height:9px;margin-top:6px;border-radius:5px;overflow:hidden;background:#f4f1ea1f}#rpm-fill{position:absolute;inset:0;background:linear-gradient(90deg,#f4f1ea,#ffb238 70%,#ff3b3b 92%);transform-origin:0 50%;transform:scaleX(.2)}.rpm-red{position:absolute;top:0;bottom:0;right:0;width:11%;border-left:2px solid var(--red);background:#ff3b3b2e}.rpm-labels{display:flex;justify-content:space-between;margin-top:3px;font-size:9px;letter-spacing:.12em;color:var(--dim)}#aero{position:absolute;left:50%;bottom:34px;transform:translate(-50%);padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.3em;color:#10141a;background:var(--accent);border-radius:999px;opacity:0;transition:opacity .15s;text-shadow:none}#aero.on{opacity:1}#toast{position:absolute;top:19%;left:0;right:0;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s}#toast.on{opacity:1;transform:none}#toast-tag{font-size:12px;font-weight:700;letter-spacing:.42em;color:var(--accent)}#toast-name{font-size:clamp(26px,4.4vw,54px);font-weight:800;letter-spacing:.02em;text-shadow:0 2px 24px rgba(0,0,0,.55)}#start{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at center,#080a0e40,#080a0eb3);transition:opacity .5s}#start.off{opacity:0}.start-card{text-align:center;max-width:560px}.start-kicker{font-size:12px;letter-spacing:.44em;color:var(--accent);font-weight:700}.start-card h1{margin:6px 0 0;font-size:clamp(54px,11vw,118px);font-weight:800;font-style:italic;line-height:.95;letter-spacing:-.02em}.start-sub{margin-top:10px;font-size:16px;color:var(--dim)}.keys{display:inline-grid;gap:8px;margin-top:26px;text-align:left;font-size:13px}.keys div{display:flex;align-items:center;gap:6px}.keys span{margin:0 10px 0 6px;color:var(--dim)}kbd{min-width:26px;padding:3px 7px;font:inherit;font-weight:700;text-align:center;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:#f4f1ea14}.start-go{margin-top:28px;font-size:13px;font-weight:700;letter-spacing:.34em;color:var(--ink);animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{opacity:.35}}@media (prefers-reduced-motion: reduce){.start-go{animation:none}}@media (max-width: 760px){.trip{top:auto;bottom:150px;right:22px}.lean{display:none}.speed{width:220px}.speed-num{font-size:48px}}