:root{--sky: #7ec8e3;--ink: #0b1220;--panel: rgba(8, 14, 24, .72);--line: rgba(255, 255, 255, .14);--lime: #c8ff00;--amber: #ff8a1e;--ok: #3dcc6e;--white: #f4f7fb;--muted: rgba(244, 247, 251, .62)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}html,body{margin:0;height:100%;height:100dvh;overflow:hidden;background:#6bb3d4;font-family:ui-rounded,SF Pro Display,Segoe UI,system-ui,sans-serif;color:var(--white)}#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}#hud{position:fixed;inset:0;pointer-events:none;z-index:2}#hud button,#hud .picker,#hud #tools,#hud #steer,#hud .pedals{pointer-events:auto}.picker{position:absolute;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translate(-50%);display:flex;gap:10px;padding:8px 10px;background:var(--panel);border:1px solid var(--line);border-radius:18px;backdrop-filter:blur(10px)}.vcard{position:relative;width:72px;height:48px;border:0;border-radius:12px;background:#ffffff14;cursor:pointer;overflow:hidden}.vcard.on{outline:2px solid var(--ok);background:#3dcc6e29}.vcard .check{display:none;position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--ok);color:#062;font-size:11px;line-height:16px;font-weight:800}.vcard.on .check{display:block}.vshape{position:absolute;inset:10px 8px 8px;border-radius:6px 6px 4px 4px}#speedbox{position:absolute;top:calc(72px + env(safe-area-inset-top));left:50%;transform:translate(-50%);text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.55)}#spd{font-size:clamp(36px,8vw,64px);font-weight:800;letter-spacing:-.04em;line-height:.9}#spd-unit{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}#mode-btn{position:absolute;top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));height:40px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--white);font-weight:800;letter-spacing:.08em;font-size:12px}#mode-btn.build{background:var(--amber);color:#1a0c00;border-color:transparent}#tools{position:absolute;left:50%;bottom:calc(118px + env(safe-area-inset-bottom));transform:translate(-50%);display:flex;gap:8px;padding:8px;background:var(--panel);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(10px);max-width:calc(100vw - 16px);overflow-x:auto}#tools button{flex:none;height:40px;padding:0 12px;border:0;border-radius:12px;background:#ffffff14;color:var(--white);font-weight:700;font-size:12px}#tools button.on{background:var(--amber);color:#1a0c00}.hint{position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:3;transform:translate(-50%);padding:8px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-size:12px;font-weight:650;color:var(--muted);white-space:nowrap}.hint.gone{display:none}.touch{position:absolute;inset:auto 0 0;height:160px;z-index:4;pointer-events:none}.steer{width:120px;height:120px;border-radius:50%;background:#080e1861;border:1px solid var(--line);position:fixed;left:calc(12px + env(safe-area-inset-left));bottom:calc(12px + env(safe-area-inset-bottom));pointer-events:auto;z-index:6}.knob{width:54px;height:54px;border-radius:50%;background:#ffffffe0;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 4px 16px #00000047}.pedals{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;pointer-events:auto;z-index:6}.pedals button{appearance:none;-webkit-appearance:none;width:86px;height:52px;border:0;border-radius:16px;font-weight:800;letter-spacing:.06em;font-size:13px}#gas{background:var(--lime);color:#143000}#gas.held,#brake.held{filter:brightness(1.12);transform:scale(.98)}#brake{background:#e5484d;color:#fff}.hidden{display:none!important}body.build-mode .touch,body.build-mode .pedals{display:none}body.build-mode #speedbox{opacity:.35}body.build-mode .hint{display:none}body.build-mode #tools{bottom:calc(18px + env(safe-area-inset-bottom))}@media(max-width:820px){.touch{display:flex}.hint{bottom:calc(150px + env(safe-area-inset-bottom))}}@media(hover:hover)and (pointer:fine)and (min-width:821px){.touch,.pedals{display:none}.hint,#tools{bottom:calc(18px + env(safe-area-inset-bottom))}}@media(max-width:420px){.picker{gap:6px;padding:6px 8px;max-width:calc(100vw - 108px)}.vcard{width:48px;height:34px}#spd{font-size:40px}}