@import url('./assets/fonts.css');
:root{color-scheme:light;--ink:#161e25;--muted:#4d5f6b;--orange:#f3702b;--line:#bbc8cf;--panel:#e8eff3f2;--cut:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101c26;color:var(--ink);font-family:Barlow,Arial,sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:700 11px Barlow,Arial,sans-serif;letter-spacing:1px}button{cursor:pointer;border:1px solid var(--line);color:var(--ink);background:var(--panel);min-height:44px;padding:0 15px}button:hover{background:#fff}button:focus-visible,a:focus-visible,select:focus-visible,#world:focus-visible{outline:2px solid var(--orange);outline-offset:3px}button:disabled{opacity:.45;cursor:progress}a{color:inherit;text-decoration:none}button span{color:var(--orange);margin-left:10px}button:active{transform:translateY(1px)}[hidden]{display:none!important}
#drive,#world{position:absolute;inset:0}#world canvas{width:100%;height:100%;display:block}#world{touch-action:none;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 65%,#07111b55)}#impact-flash{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #f8783766;opacity:0}
.drive-header{position:absolute;inset:0 0 auto;height:78px;background:#e4ecf0f5;border-bottom:1px solid #bcc9d0;display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:24px;box-shadow:0 2px 20px #0002}.garage-link{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:2px;min-height:44px}.garage-link>span{font-size:25px;color:var(--orange)}.wordmark{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center}.wordmark svg{width:47px;height:33px;fill:var(--ink)}.wordmark b{display:block;font-size:19px;letter-spacing:5px}.wordmark span{display:block;font-size:11px;letter-spacing:1.3px;margin-top:3px;color:var(--muted)}.tools{display:flex;gap:8px}.tools button{padding:0 13px;background:transparent}.tools #pause{background:var(--ink);color:#f1f6f8;clip-path:var(--cut);border:0}.tools #sound[aria-pressed=false] span{color:var(--muted)}
.location{position:absolute;top:101px;left:30px;display:grid;grid-template-columns:6px auto;align-items:center;gap:7px 10px;font-size:12px;letter-spacing:1.5px;font-weight:700;background:var(--panel);padding:15px 20px 16px;clip-path:var(--cut)}.live-dot{width:5px;height:5px;background:var(--orange)}.location small{grid-column:2;font-size:11px;letter-spacing:1px;color:var(--muted);font-weight:500}
.vehicle-picker{position:absolute;right:30px;top:101px;width:218px;background:var(--panel);padding:14px 16px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}.vehicle-picker label{display:block;font-size:11px;letter-spacing:1.4px;color:var(--muted);margin-bottom:8px}.vehicle-picker select{width:100%;height:42px;background:#dbe5ea;border:1px solid #aab9c3;color:var(--ink);padding:0 10px;border-left:2px solid var(--orange)}
#mission{position:absolute;right:30px;top:200px;width:218px;padding:17px 16px;background:var(--panel);clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}#mission>div:first-child{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.8px;color:var(--muted)}#mission b{color:#a9420c}#mission strong{display:block;font-size:17px;margin-top:14px}#mission p{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px;margin:13px 0}#route-distance{font-size:16px;color:var(--ink)}.route-progress{height:3px;background:#c1cfd7}.route-progress i{display:block;height:100%;width:0;background:var(--orange)}
#notice{position:absolute;top:104px;left:50%;transform:translateX(-50%);font-size:13px;background:var(--panel);padding:12px 18px;opacity:0;transition:opacity .2s;pointer-events:none;border-left:3px solid var(--orange);max-width:40vw;text-align:center;box-shadow:0 4px 20px #0003}#notice.visible{opacity:1}
.map-panel{position:absolute;bottom:75px;left:30px;width:186px;box-shadow:0 4px 30px #0003;background:var(--panel);border:1px solid #b9c9d2;padding:6px;clip-path:var(--cut)}.map-panel canvas{width:100%;height:auto;display:block}.map-panel>div{display:flex;gap:7px;align-items:center;border-top:1px solid #b9c9d2;padding:8px 4px 3px;font-size:11px}.map-panel b{font-weight:500;color:var(--muted);font-size:11px}.map-panel>div>span:first-child{color:#a7410e;font-weight:700}.map-panel #trip{margin-left:auto;white-space:nowrap}.telemetry{position:absolute;bottom:75px;right:30px;width:200px;background:var(--panel);padding:19px 20px;clip-path:var(--cut)}.speed-line{display:flex;align-items:baseline;gap:10px}.speed-line strong{font:600 78px/.95 'Barlow Condensed',Impact,sans-serif;font-variant-numeric:tabular-nums;margin-left:auto}.speed-unit{font-size:11px;letter-spacing:1px}#gear{font:600 23px 'Barlow Condensed',sans-serif;color:#a9420c;align-self:center;min-width:15px}.speed-track,.boost-track{height:3px;background:#c2cfd7;margin-top:11px}.speed-track i,.boost-track i{display:block;height:100%;background:var(--ink);width:0}.boost-track i{background:var(--orange);width:100%}.boost-label{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.8px;margin-top:17px}.boost-label span:last-child{color:#a9420c}#altitude{text-align:right;font-size:11px;letter-spacing:1px;color:var(--muted);margin:13px 0 0}#altitude b{color:var(--ink);font-size:18px;margin-left:8px}
.keyboard-help{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:24px;height:48px;color:var(--muted);font-size:11px;white-space:nowrap;background:#e2ebeff0;border-top:1px solid #b4c4ce}.keyboard-help span{display:flex;align-items:center;gap:7px}kbd{font:700 11px Barlow,Arial,sans-serif;background:#f1f5f7;border:1px solid #b5c4cd;padding:4px 6px;color:var(--ink);white-space:nowrap}#recover{position:absolute;bottom:80px;left:230px;padding:0;width:44px;min-height:44px;font-size:25px;clip-path:var(--cut)}
.touch-controls{display:none;position:absolute;inset:auto 20px 18px;justify-content:space-between;align-items:flex-end;pointer-events:none}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;height:58px;min-width:58px;box-shadow:0 3px 10px #0003}.touch-controls button.held{background:var(--orange);border-color:#9f4316;color:#111}.steer-buttons{display:flex;gap:8px}.steer-buttons button{font-size:25px}.pedals{display:flex;gap:8px;align-items:flex-end}.pedals button{font-size:11px;letter-spacing:.1px;padding:0 11px}.pedals [data-input=gas]{height:76px;background:#f3702b;color:#1a2024;border-color:#af4b18}.pedals [data-input=boost]{height:44px}.flight-buttons{display:flex;gap:7px;position:absolute;right:0;bottom:91px}.flight-buttons button{height:44px;min-height:44px;font-size:11px}
#menu{position:absolute;top:50%;left:7%;transform:translateY(-42%);margin:0;width:390px;max-width:90vw;border:0;border-top:3px solid var(--orange);padding:30px;background:#e6eef2fa;color:var(--ink);box-shadow:0 20px 60px #0005;z-index:10;clip-path:var(--cut)}#menu::backdrop{background:#08142142}.menu-kicker{font-size:11px;letter-spacing:1.8px;color:#a9420c}#menu h1{font:800 42px/1.04 Barlow;margin:18px 0 15px;letter-spacing:-1px}#menu p{font-size:13px;line-height:1.7;color:var(--muted);margin:0 0 20px}.control-guide{display:grid;grid-template-columns:1fr 1fr;gap:12px 8px;margin-bottom:25px}.control-guide span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}.control-guide kbd{font-size:11px;padding:4px}.touch-guide{display:none}#menu #loading{font-size:11px;color:#a9420c}#start{width:100%;height:48px;background:var(--ink);color:#fff;border:0;clip-path:var(--cut);text-align:left;display:flex;align-items:center;justify-content:space-between}#start:hover{background:#33434c}#restart{width:100%;margin-top:10px}#menu-garage{display:block;text-align:center;margin-top:18px;font-size:11px;text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
 .drive-header{height:60px;padding:0 14px;gap:8px}.wordmark{display:none}.garage-link{font-size:11px;letter-spacing:.8px;gap:5px}.tools{gap:5px}.tools button{padding:0 9px;letter-spacing:.2px}.tools #camera{font-size:0;width:38px;padding:0}.tools #camera span{font-size:13px;margin:0}.tools #pause span{display:none}button span{margin-left:5px}
 .location{top:77px;left:14px;width:157px;font-size:11px;letter-spacing:.5px;padding:13px 11px;gap:6px}.location small{letter-spacing:0;font-size:11px}.vehicle-picker{top:77px;right:14px;width:164px;padding:12px 10px}.vehicle-picker label{font-size:11px;letter-spacing:.5px}.vehicle-picker select{font-size:11px;letter-spacing:0;padding:0 6px}#mission{top:174px;right:14px;width:164px;padding:13px 10px}#mission>div:first-child{letter-spacing:0}#mission strong{font-size:15px;margin-top:11px}#mission p{margin:11px 0;gap:5px}#route-direction{font-size:11px;letter-spacing:-.3px}#route-distance{font-size:14px}
 .map-panel{left:14px;width:144px;bottom:190px}.map-panel b{display:none}.map-panel>div{font-size:11px}.telemetry{right:14px;bottom:190px;width:150px;padding:15px 13px}.speed-line{gap:6px}.speed-line strong{font-size:60px}.boost-label{letter-spacing:0}#gear{font-size:19px}.speed-unit{letter-spacing:0}#altitude b{font-size:16px}
 .touch-controls{display:flex;left:14px;right:14px;bottom:max(16px,env(safe-area-inset-bottom))}.keyboard-help,.control-guide{display:none}.touch-guide{display:block!important}.touch-controls button{min-width:48px;height:54px;padding:0 9px}.steer-buttons{gap:6px}.pedals{gap:6px;position:relative}.pedals [data-input=gas]{height:70px}.pedals [data-input=boost]{position:absolute;bottom:80px;right:0;height:44px}.flight-buttons{bottom:134px}.flight-buttons button{height:44px;min-height:44px;font-size:11px}.pedals button{font-size:11px}#recover{bottom:96px;left:14px;width:44px;min-height:44px}
 #menu{left:50%;transform:translate(-50%,-40%);width:350px;padding:25px}#menu h1{font-size:35px}#menu p{font-size:13px}#notice{max-width:88vw;width:max-content;white-space:normal;font-size:12px;top:36%}
}
@media(max-height:560px) and (min-width:600px){
 .drive-header{height:54px;padding:0 16px}.wordmark b{font-size:15px}.wordmark span{font-size:11px}.wordmark svg{width:34px;height:26px}.tools button{min-height:38px}.location{top:68px;left:16px;padding:10px 12px;font-size:11px;width:194px}.location small{font-size:11px;letter-spacing:0}.vehicle-picker{top:65px;right:16px;width:194px;padding:7px 8px}.vehicle-picker label{display:none}.vehicle-picker select{height:36px;font-size:11px}
 #mission{top:66px;right:auto;left:50%;transform:translateX(-50%);width:220px;padding:11px 13px}#mission>div:first-child{font-size:11px}#mission strong{font-size:14px;margin-top:7px}#mission p{margin:7px 0;font-size:11px}#route-distance{font-size:13px}
 .map-panel{left:16px;bottom:81px;width:103px;padding:4px}.map-panel b{display:none}.map-panel>div{font-size:11px;padding:5px 1px 1px}.telemetry{right:16px;bottom:97px;width:146px;padding:12px}.speed-line strong{font-size:48px}.speed-line{gap:5px}.boost-label{font-size:11px;letter-spacing:0;margin-top:9px}.boost-track,.speed-track{margin-top:7px}#altitude{margin:8px 0 0;font-size:11px}#altitude b{font-size:15px}#recover{left:132px;bottom:83px;width:44px;min-height:44px}
 .keyboard-help,.control-guide{display:none}.touch-controls{display:flex;left:16px;right:16px;bottom:14px}.touch-guide{display:block!important}.touch-controls button{height:50px;min-height:44px;min-width:50px;font-size:11px}.steer-buttons button{font-size:24px}.pedals{position:static;gap:6px}.pedals [data-input=gas]{height:56px}.pedals [data-input=boost]{position:static;height:44px}.flight-buttons{right:268px;bottom:0}.flight-buttons button{height:44px;min-width:54px;padding:0 8px}
 #menu{top:50%;left:50%;transform:translate(-50%,-43%);padding:19px 24px;width:490px}#menu h1{font-size:28px;margin:10px 0}#menu p{margin-bottom:10px;font-size:12px;line-height:1.5}.menu-kicker{font-size:11px}#menu-garage{margin-top:10px}#start{height:44px}#notice{top:auto;bottom:80px;max-width:45vw;font-size:11px;padding:9px 12px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(max-width:599px){.telemetry,.map-panel{bottom:202px}}
@media(max-width:599px) and (max-height:730px){#mission{left:14px;right:auto;top:154px;padding:10px;width:157px}#mission strong{font-size:13px;margin-top:7px}#mission p{margin:7px 0}.map-panel{width:104px;bottom:178px}.telemetry{width:150px;bottom:202px}}

/* Dim the world without intercepting the HUD or making the page inert. */
.menu-shade{position:absolute;inset:0;background:#08142142;pointer-events:none;display:none}
#drive[data-phase="ready"] .menu-shade,#drive[data-phase="paused"] .menu-shade{display:block}