:root{--plate-blue: #1f4e9a;--plate-white: #f7f8f5;--slate: rgba(22, 30, 40, .74);--slate-edge: rgba(255, 255, 255, .1);--ink: #f1f3f5;--ink-muted: #a8b3bf;--signal: #f2a93b;--font-ui: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display: "Fira Sans Condensed", "Fira Sans", system-ui, sans-serif;color:var(--ink);font-family:var(--font-ui);font-size:15px;line-height:1.45}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#16202b;overscroll-behavior:none}p{margin:0}[hidden]{display:none!important}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%}.hud{position:fixed;inset:0;pointer-events:none}.location{position:absolute;top:calc(18px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));display:grid;gap:8px;justify-items:start}.region{font-family:var(--font-display);font-size:13px;color:var(--ink);text-shadow:0 1px 3px rgba(0,0,0,.55)}.street-plate{display:grid;max-width:min(64vw,440px);padding:8px 16px 9px;background:var(--plate-blue);color:var(--plate-white);border-radius:6px;box-shadow:inset 0 0 0 3px var(--plate-blue),inset 0 0 0 5px var(--plate-white),0 6px 18px #00000059}.street-name{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:1.15}.street-name-en{font-family:var(--font-display);font-size:13px;opacity:.82}.street-name-en:empty{display:none}.minimap{position:absolute;top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));border-radius:50%;box-shadow:0 0 0 2px #ffffff2e,0 8px 24px #0006}.help{position:absolute;left:18px;bottom:28px;padding:12px 14px;background:var(--slate);border:1px solid var(--slate-edge);border-radius:10px;backdrop-filter:blur(6px);font-size:13px}.help-title{font-family:var(--font-display);font-weight:600;margin-bottom:6px}.help dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0}.help dt{display:flex;gap:4px}.help dd{margin:0;color:var(--ink-muted);align-self:center}kbd{min-width:24px;padding:1px 6px;border-radius:4px;border:1px solid rgba(255,255,255,.22);border-bottom-width:2px;background:#ffffff14;font:600 12px var(--font-display);text-align:center}.dash{position:absolute;right:22px;bottom:30px;display:grid;justify-items:end;gap:2px;text-shadow:0 2px 8px rgba(0,0,0,.55)}.vehicle-name{font-family:var(--font-display);font-size:13px;color:var(--ink)}.speed{display:flex;align-items:baseline;gap:6px}.speed-value{font-family:var(--font-display);font-weight:700;font-size:64px;line-height:1;font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}.speed-unit{font-size:14px;color:var(--ink)}.gear{margin-left:4px;min-width:28px;padding:2px 0;border-radius:5px;background:var(--signal);color:#1c1405;text-shadow:none;font:700 16px var(--font-display);text-align:center}.toast{position:absolute;left:50%;bottom:120px;transform:translate(-50%);max-width:min(90vw,560px);padding:10px 16px;background:var(--slate);border:1px solid var(--slate-edge);border-radius:10px;font-size:13px;text-align:center}.overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:24px;background:#16202b}.overlay-card{width:min(100%,520px);display:grid;gap:14px}.title{margin:0;font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1.05;display:inline-block;justify-self:start;padding:10px 20px 12px;background:var(--plate-blue);color:var(--plate-white);border-radius:8px;box-shadow:inset 0 0 0 4px var(--plate-blue),inset 0 0 0 7px var(--plate-white)}.overlay-message{color:var(--ink-muted);max-width:60ch}.progress{height:3px;overflow:hidden;border-radius:2px;background:#ffffff1a}.progress span{display:block;width:35%;height:100%;background:var(--signal);animation:progress 1.4s ease-in-out infinite}@keyframes progress{0%{transform:translate(-100%)}to{transform:translate(300%)}}@media (prefers-reduced-motion: reduce){.progress span{animation:none;width:100%;opacity:.5}}.error-detail{margin:0;padding:12px 14px;max-height:45vh;overflow:auto;white-space:pre-wrap;border-radius:8px;background:#0000004d;color:#ffd9d2;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace}.attribution{position:fixed;right:8px;bottom:6px;z-index:20;font-size:11px;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.7)}.attribution a{color:inherit}.attribution a:focus-visible{outline:2px solid var(--signal);outline-offset:2px}@media (max-width: 720px){.help{display:none}.speed-value{font-size:44px}.street-name{font-size:18px}}body.touch{--pad: clamp(58px, 17vmin, 88px);--gap: 10px;--edge: 14px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body.touch .help{display:none}body.touch .error-detail{touch-action:pan-y;user-select:text;-webkit-user-select:text}.touch-controls{position:absolute;inset:0;pointer-events:none}.touch-controls button{pointer-events:auto;touch-action:none}.touch-pad,.touch-icon{display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.16);background:var(--slate);color:var(--ink);backdrop-filter:blur(6px);font:600 15px var(--font-display);transition:background-color 60ms linear,transform 60ms linear}.touch-pad svg,.touch-icon svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.touch-pad.is-active{background:var(--signal);border-color:var(--signal);color:#1c1405;transform:scale(.96)}.touch-steer{position:absolute;left:calc(var(--edge) + env(safe-area-inset-left));bottom:calc(var(--edge) + env(safe-area-inset-bottom));display:flex;gap:var(--gap)}.touch-steer .touch-pad{width:var(--pad);height:var(--pad);border-radius:18px}.touch-pedals{position:absolute;right:calc(var(--edge) + env(safe-area-inset-right));bottom:calc(var(--edge) + env(safe-area-inset-bottom));display:grid;grid-template-columns:var(--pad) var(--pad);grid-template-areas:"handbrake handbrake" "brake gas";gap:var(--gap);align-items:end}.pad-handbrake{grid-area:handbrake;height:44px;border-radius:12px}.pad-brake{grid-area:brake;height:var(--pad);border-radius:14px}.pad-gas{grid-area:gas;height:calc(var(--pad) * 1.45);border-radius:14px}.touch-utility{position:absolute;top:calc(148px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px}.touch-icon{width:44px;height:44px;border-radius:50%}.touch-icon:active{background:#fff3}body.touch .dash{right:auto;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%);justify-items:center}body.touch .speed-value{font-size:44px;min-width:0}body.touch .attribution{right:auto;left:50%;bottom:calc(4px + env(safe-area-inset-bottom));transform:translate(-50%);font-size:10px;white-space:nowrap}@media (orientation: portrait){body.touch .dash{bottom:calc(var(--edge) + env(safe-area-inset-bottom) + var(--pad) * 1.45 + 64px)}body.touch .location{max-width:calc(100vw - 180px)}}@media (prefers-reduced-motion: reduce){.touch-pad{transition:none}.touch-pad.is-active{transform:none}}:root{--route: #3d8bff;--guide: #0b6e4f}.location{max-width:min(76vw,380px)}.location button,.search-panel{pointer-events:auto}.search-open{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--slate-edge);border-radius:999px;background:var(--slate);color:var(--ink);backdrop-filter:blur(6px);font:600 14px var(--font-display);cursor:pointer}.search-open svg,.search-close,.nav-cancel{flex:none}.search-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.search-open kbd{min-width:20px;padding:0 5px}body.touch .desktop-only{display:none}.search-panel{width:min(76vw,380px);padding:8px;border:1px solid var(--slate-edge);border-radius:12px;background:#121922f0;box-shadow:0 10px 30px #0006}.search-row{display:flex;gap:6px}.search-row input{flex:1;min-width:0;padding:10px 12px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:#ffffff0f;color:var(--ink);font:16px var(--font-ui);user-select:text;-webkit-user-select:text;touch-action:manipulation}.search-row input:focus-visible{outline:2px solid var(--route);outline-offset:1px}.search-close,.nav-cancel{width:40px;border:0;border-radius:8px;background:#ffffff14;color:var(--ink);font-size:22px;line-height:1;cursor:pointer}.search-results{list-style:none;margin:6px 0 0;padding:0;max-height:min(50vh,360px);overflow-y:auto;touch-action:pan-y}.search-results button{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name distance" "detail distance";width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.search-results button:hover,.search-results button:focus-visible{background:#ffffff14;outline:none}.result-name{grid-area:name;font:600 15px var(--font-display)}.result-detail{grid-area:detail;font-size:12px;color:var(--ink-muted)}.result-distance{grid-area:distance;align-self:center;padding-left:12px;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}.search-empty{padding:10px;font-size:13px;color:var(--ink-muted)}.nav-banner{display:flex;align-items:center;gap:12px;width:min(76vw,380px);padding:10px 10px 10px 12px;border-radius:12px;background:var(--guide);color:#fff;box-shadow:0 8px 24px #00000059}.nav-arrow{flex:none;width:44px;height:44px}.nav-arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(var(--turn, 0deg));transition:transform .2s ease-out}.nav-arrow .arrive-shape{display:none;fill:currentColor}.nav-arrow[data-type=arrive] .arrow-shape{display:none}.nav-arrow[data-type=arrive] .arrive-shape{display:inline}.nav-arrow[data-type=arrive] svg{transform:none}.nav-text{flex:1;min-width:0}.nav-distance{font:700 22px/1.1 var(--font-display);font-variant-numeric:tabular-nums}.nav-instruction{font:600 15px/1.25 var(--font-display);overflow-wrap:anywhere}.nav-meta{margin-top:2px;font-size:12px;opacity:.85}.nav-cancel{align-self:stretch;background:#ffffff24;color:#fff}@media (prefers-reduced-motion: reduce){.nav-arrow svg{transition:none}}