@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--amber:#f5b544;--muted:#a9b2b7}*{box-sizing:border-box}body{margin:0;background:#080d11;color:#f4f4ee;font-family:Barlow,Arial,sans-serif;overflow:hidden}canvas,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(#05090dbb,transparent 25%,transparent 65%,#05090ddd),linear-gradient(90deg,#05090d77,transparent 35%,transparent 75%,#05090d66)}header{position:absolute;top:0;left:0;width:100%;padding:30px 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.brand{text-decoration:none;color:#fff;font:800 29px 'Barlow Condensed',sans-serif;font-style:italic;letter-spacing:1px}.brand span{color:var(--amber)}.brand small{display:block;font:500 10px Barlow,sans-serif;letter-spacing:3px;margin-top:7px;color:#a7afb4}.route{font:700 16px Barlow;letter-spacing:1px}.route span{color:#929da4;font:500 11px Barlow;margin-left:13px;letter-spacing:2px}.actions{display:flex;gap:8px}button{cursor:pointer;border:1px solid #ffffff30;background:#101a2077;color:#fff;font:600 11px Barlow;letter-spacing:1.2px;padding:12px 15px}button:hover{border-color:var(--amber);color:var(--amber)}button:focus-visible{outline:2px solid var(--amber);outline-offset:4px}.stats{position:absolute;left:38px;top:137px;display:flex;gap:40px}label{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);font-weight:600}.stats strong{display:block;font:600 30px 'Barlow Condensed';letter-spacing:1px;margin-top:5px}.stats strong small{font:500 12px Barlow;color:var(--muted)}.conditions{position:absolute;right:38px;top:138px;text-align:right;display:grid;gap:8px}.conditions .live{font-size:10px;letter-spacing:2px;color:var(--amber)}.conditions strong{font:600 19px 'Barlow Condensed';letter-spacing:1px}.conditions>span:last-child{font-size:10px;letter-spacing:1px;color:#a9b2b7}#overlay,#results,#paused{position:absolute;left:8%;top:29%;max-width:480px}.eyebrow{color:var(--amber);font-size:11px;letter-spacing:4px;font-weight:600}h1{font:800 clamp(48px,6.5vw,100px)/.9 'Barlow Condensed',Impact,sans-serif;margin:20px 0;letter-spacing:-1px}h1 em{color:var(--amber);font-style:italic}section p{font-size:16px;line-height:1.6;color:#c2c8ca;margin:24px 0}section button{background:var(--amber);color:#171710;border:0;font-size:13px;padding:18px 24px;min-width:240px;text-align:left;display:block}section button:hover{background:#ffd38a;color:#111}section button span{float:right;font-size:20px}section>small{display:block;font-size:11px;color:#a9b2b7;margin-top:16px;letter-spacing:1px}.dashboard{position:absolute;bottom:96px;right:48px;width:220px}.speed{display:flex;justify-content:flex-end;align-items:center;gap:12px}.speed strong{font:600 92px/.9 'Barlow Condensed';font-style:italic;font-variant-numeric:tabular-nums}.speed>div{font-size:10px;letter-spacing:2px;color:#a9b2b7}.speed small{display:block;color:var(--amber);font:600 24px 'Barlow Condensed';margin-top:10px}.rpm{height:4px;background:#ffffff20;margin:16px 0 24px;transform:skewX(-18deg)}.rpm b{display:block;height:100%;width:0;background:#eee}.nitro label{display:flex;justify-content:space-between;color:var(--amber)}.nitro i,#combo i{display:block;height:5px;background:#ffffff20;margin-top:10px}.nitro b,#combo b{height:100%;display:block;background:var(--amber);width:100%}#combo{position:absolute;left:38px;bottom:116px;width:170px}#multi{font:700 58px 'Barlow Condensed';color:var(--amber)}#combo label{font-size:9px}footer{position:absolute;bottom:0;width:100%;border-top:1px solid #ffffff20;padding:21px 38px;display:flex;justify-content:center;gap:32px}footer span{font-size:9px;letter-spacing:1px;color:#a4adb2;white-space:nowrap}kbd{display:inline-block;min-width:21px;text-align:center;border:1px solid #ffffff35;border-radius:3px;padding:4px;margin-right:5px;font:10px Barlow;color:#ddd}#toast{position:absolute;top:32%;left:50%;transform:translateX(-50%);color:var(--amber);font:700 30px 'Barlow Condensed';text-shadow:0 2px 14px #000;text-align:center}.touch{display:none}[hidden]{display:none!important}@media(max-width:800px){header{padding:18px}.route{display:none}.brand{font-size:23px}.actions button{padding:10px 8px;font-size:9px}.stats{left:18px;top:108px;gap:22px}.stats strong{font-size:24px}.conditions{right:18px;top:190px}.conditions>span:last-child{display:none}#overlay,#results,#paused{left:7%;top:31%}h1{font-size:64px}.dashboard{right:22px;bottom:120px;width:160px}.speed strong{font-size:68px}#combo{left:20px;bottom:140px;width:120px}footer{display:none}.touch{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:8px}.touch button{padding:16px 12px;touch-action:none;background:#16212ddd}label{font-size:9px}.stats{gap:18px}}
/* 3D edition: the highway stays visible around a restrained HUD. */
#road{outline:none;touch-action:none}#effects{pointer-events:none;z-index:2}.vignette{z-index:3;background:linear-gradient(#060a0e80,transparent 24%,transparent 72%,#060a0e99)}header,main{position:relative;z-index:4}header{position:absolute;pointer-events:none}header a,header button{pointer-events:auto}main{position:absolute;inset:0;pointer-events:none}main button,main select,main a,main section,main #settings{pointer-events:auto}header{padding:22px 30px}.stats{left:30px;top:114px}.conditions{top:115px;right:30px}#overlay,#results,#paused{top:29%;left:6%;max-width:440px}#overlay h1{font-size:clamp(60px,6vw,90px)}#overlay p{color:#eef0ec;text-shadow:0 1px 5px #111}section>small{font-size:12px}#overlay{background:linear-gradient(90deg,#07111ba8,transparent);padding:22px 28px 24px 0}#results,#paused{background:#0a121beb;padding:28px 34px;backdrop-filter:blur(12px)}.cameraChoice{display:flex;gap:6px;margin-top:22px}.cameraChoice button{min-width:0;padding:10px 12px;background:#101b2588;color:#c3cdd2;border:1px solid #ffffff40;font-size:10px;white-space:nowrap}.cameraChoice button.selected{border-color:var(--amber);color:var(--amber)}#settings{position:absolute;right:30px;top:88px;width:min(385px,calc(100vw - 40px));max-height:calc(100dvh - 105px);overflow:auto;background:#0c141ef5;border:1px solid #ffffff30;padding:24px;box-shadow:0 20px 70px #0008;backdrop-filter:blur(14px)}#settings h2{font:700 28px 'Barlow Condensed';margin:0 0 20px}#settings label{font-size:12px;margin:14px 0;letter-spacing:1.2px}select{display:block;width:100%;margin-top:8px;padding:10px;border:1px solid #ffffff30;background:#17232e;color:#fff;font:14px Barlow}#settings p{font-size:13px;color:#aebbc2;line-height:1.7}#closeSettings{width:100%;background:var(--amber);color:#101820}.toggles{display:flex;gap:5px;flex-wrap:wrap}.toggles button{font-size:10px;padding:10px}.credits{display:block;margin-top:15px;font-size:11px;color:#a8b2ba;line-height:1.7}.credits a{color:inherit}#focusHint{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);color:#e6c481;background:#101b27a6;padding:12px 18px;font-size:11px;letter-spacing:2px;white-space:nowrap}.dashboard{right:30px;bottom:92px;width:190px}.speed strong{font-size:82px}#combo{left:30px;bottom:100px}footer{padding:16px 24px;gap:22px}body[data-playing=true] .brand small{display:none}body[data-camera=cockpit] .dashboard{bottom:88px;right:25px;width:150px}body[data-camera=cockpit] .speed strong{font-size:64px}button:disabled{opacity:.65;cursor:wait}#pov{border-color:#f5b54480;color:var(--amber)}@media(max-width:800px){header{padding:15px}.stats{left:18px;top:96px}.conditions{right:18px;top:158px}.actions{gap:4px}.actions button{font-size:9px;padding:10px 6px}#overlay,#results,#paused{left:5%;top:28%;max-width:90vw}#overlay h1{font-size:62px}.cameraChoice{gap:4px}.cameraChoice button{font-size:9px;padding:10px}.dashboard{right:20px;bottom:120px}#combo{bottom:128px;left:20px}#focusHint{bottom:94px;font-size:9px}body[data-camera=cockpit] .dashboard{bottom:115px}.conditions strong{font-size:16px}.brand small{font-size:8px;letter-spacing:2px}}

.settingHint{display:block;color:#9aaab6;font-size:12px;line-height:1.5}.maker{display:block;text-align:center;font-size:12px;color:#a9b6bf;letter-spacing:.6px;margin:21px 0 0;padding-top:15px;border-top:1px solid #ffffff20}#settings .driftHelp{font-size:12px;line-height:1.55;color:#aeb7be}#driftState{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-size:12px;letter-spacing:2px;color:#ffc46d;text-shadow:0 2px 7px #000}