:root{color-scheme:dark;--lime:#e2fb57;--ink:#111813;--glass:rgba(12,20,18,.84)}*{box-sizing:border-box}body{margin:0;overflow:hidden;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#f5f6ed;background:#a3c6df}#view{display:block;width:100vw;height:100vh}header{position:absolute;top:30px;left:34px;right:34px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.wordmark{font-size:25px;font-weight:900;font-style:italic;letter-spacing:-1px;text-shadow:0 2px 15px #1118}.wordmark span{display:block;font-size:10px;letter-spacing:2px;font-style:normal;font-weight:600;margin-top:5px}.session{background:var(--glass);padding:13px 18px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:1px;display:flex;align-items:center;gap:10px}.session i{width:7px;height:7px;background:var(--lime);border-radius:50%}.session span{border-left:1px solid #fff3;padding-left:12px;color:#cbd1c7}#mapcard{position:absolute;left:34px;top:30px;width:215px;background:var(--glass);border:1px solid #fff2;border-radius:10px;overflow:hidden}#map{width:100%;height:auto}.maplabel{font-size:8px;letter-spacing:1px;padding:14px 16px;border-top:1px solid #fff2;color:#a8b1a8}.maplabel span{display:block;font-size:14px;letter-spacing:0;margin-top:6px;color:#f5f6ed}.maptitle{position:absolute;top:11px;left:15px;right:12px;font-size:15px;line-height:1;font-weight:900;font-style:italic;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px #1118;pointer-events:none}#timing{position:absolute;top:30px;right:34px;min-width:198px;background:var(--glass);padding:18px 20px;border-radius:8px}#timing>div{font-size:10px;letter-spacing:2px;color:#c0cbbd}#timing>div b{float:right;color:var(--lime);font-size:18px}#timer{font-variant-numeric:tabular-nums;display:block;font-size:27px;font-weight:500;margin:16px 0}#timing>span{font-size:10px;color:#a9b4aa}#timing>span b{float:right;color:#fff;font-weight:500}#valid{display:block;margin-top:13px;color:var(--lime);font-size:10px}#telemetry{position:absolute;bottom:84px;right:34px;width:295px;background:var(--glass);border:1px solid #fff2;border-radius:12px;padding:22px}.speed{display:flex;align-items:baseline;gap:9px}.speed strong{font-size:74px;font-weight:650;line-height:1;letter-spacing:-4px;font-variant-numeric:tabular-nums}.speed span{font-size:11px;color:#b4bdb2}.speed b{margin-left:auto;border:1px solid #fff4;padding:9px 14px;font-size:23px;font-weight:500;border-radius:4px;color:var(--lime)}.bar{height:3px;background:#ffffff24;margin:18px 0}.bar i{display:block;width:0;background:var(--lime);height:100%;transition:width .1s}.sensors{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:#a5b2a7}.sensors b{display:block;font-size:15px;letter-spacing:0;font-weight:500;color:white;margin-top:8px;font-variant-numeric:tabular-nums}#surface{font-size:9px;letter-spacing:1.2px;margin:17px 0 0;color:var(--lime)}footer{position:absolute;bottom:22px;left:34px;right:34px;display:flex;align-items:center;justify-content:space-between;font-size:11px;gap:16px}footer>div{background:var(--glass);padding:14px 18px;border-radius:6px;color:#cbd2c8}kbd{border:1px solid #fff3;border-radius:3px;padding:2px 5px;margin:0 3px 0 10px;font-size:10px;color:#fff}kbd:first-child{margin-left:0}button,select{font:inherit;color:inherit;border:1px solid #fff3;background:#25332a;padding:12px 16px;border-radius:5px;cursor:pointer}button:hover{background:#3b4c3e}button:disabled{opacity:.4;cursor:wait}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,13,.94),rgba(8,18,13,.6) 48%,rgba(8,18,13,.05));display:flex;align-items:center;padding:50px 8vw;backdrop-filter:blur(3px)}.overlay article{width:440px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--lime);font-weight:700}h1{font-size:58px;font-weight:650;line-height:1.03;letter-spacing:-2px;margin:23px 0}article p{font-size:15px;line-height:1.6;color:#bfcdc1;max-width:400px}.choices{display:flex;gap:14px;margin:26px 0}.choices label{display:block;font-size:11px;flex:1;color:#a3b5a6}.choices select{display:block;width:100%;margin-top:8px;font-size:12px;padding:12px 9px}article button{display:block;width:100%;margin:10px 0;font-weight:600}.primary{background:var(--lime);color:#142018;border:0;padding:17px}.primary:hover{background:#efffa0}article small{display:block;font-size:10px;line-height:1.8;color:#94a79a;margin-top:23px}article a{display:inline-block;color:#c7d4c8;font-size:10px;margin-top:10px;text-underline-offset:4px}.tour-badge{align-self:center;font-size:10px;letter-spacing:.6px;padding:6px 10px;border-radius:12px;background:#efbd6a1f;border:1px solid #efbd6a80;color:#f5d58f;white-space:nowrap;pointer-events:none}
#status{position:absolute;left:50%;top:90px;transform:translateX(-50%);background:var(--glass);padding:10px 17px;border-radius:20px;font-size:11px;z-index:2;pointer-events:none}.hidden{display:none!important}@media(max-width:850px){#mapcard{width:150px;left:16px;top:20px}.maptitle{top:7px;left:10px;font-size:11px}header{left:16px;right:16px;top:20px}.session{font-size:9px;padding:10px}.wordmark{font-size:20px}#timing{right:16px;top:20px;min-width:160px}#telemetry{right:16px;bottom:72px;width:240px;padding:16px}.speed strong{font-size:56px}footer{left:16px;right:16px;font-size:9px}footer>div{padding:10px}kbd{margin-left:4px}h1{font-size:44px}.overlay article{width:390px}}@media(max-height:680px){.overlay{padding:25px 7vw}h1{font-size:42px;margin:15px 0}.choices{margin:15px 0}article small{margin-top:10px}}

#view{touch-action:none;cursor:grab}#view.dragging{cursor:grabbing}#cameraTools{position:absolute;left:34px;bottom:90px;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 400px)}#cameraTools button{white-space:nowrap;font-size:11px;background:var(--glass)}#cameraTools button.active{color:var(--lime);border-color:var(--lime)}#cameraHint{font-size:11px;line-height:1.5;background:var(--glass);padding:10px 12px;border-radius:5px;pointer-events:none}@media(max-width:850px){#cameraTools{left:16px;bottom:85px;max-width:calc(100vw - 285px);flex-wrap:wrap;gap:6px}#cameraHint{font-size:10px}}

.cockpit-mode #telemetry{display:none}.cockpit-mode #mapcard{opacity:.85}.cockpit-mode #timing{opacity:.85}

.cockpit-mode #mapcard{width:140px;top:20px;left:20px}.cockpit-mode .maptitle{top:7px;left:10px;font-size:11px}.cockpit-mode .maplabel{padding:8px 10px;font-size:7px}.cockpit-mode .maplabel span{font-size:11px}.cockpit-mode #timing{top:20px;right:20px;min-width:165px;padding:12px}.cockpit-mode #timer{font-size:22px;margin:10px 0}

.pointer-locked #view{cursor:none}
#fuelGauge{position:absolute;right:34px;top:290px;width:198px;padding:14px 16px;background:var(--glass);border:1px solid #fff3;border-radius:8px;pointer-events:none}#fuelGauge>div{display:flex;align-items:center;justify-content:space-between;gap:10px}#fuelStatus{font-size:9px;letter-spacing:1px;color:#c4d1bb}#fuelVolume{font-size:19px;color:#e2fb57;font-variant-numeric:tabular-nums;white-space:nowrap}#fuelBar{display:block;width:100%;height:14px;margin:9px 0 3px;accent-color:#e2fb57}#fuelGauge small{display:flex;justify-content:space-between;font-size:8px;color:#b8c8b2}#fuelGauge.reserve{border-color:#ed9466;background:#3c211cef}#fuelGauge.reserve #fuelVolume,#fuelGauge.reserve #fuelStatus{color:#ffbd7b}.map-legend{display:flex;align-items:center;gap:5px;font-size:7px;letter-spacing:.2px;margin-top:11px;color:#b6c6b5}.map-legend i{width:6px;height:6px;border-radius:50%;background:#e2fb57}.map-legend b{color:#e6906b;margin-left:6px;font-size:10px}body:has(#menu:not(.hidden)) #fuelGauge{display:none}
@media(max-width:850px){#fuelGauge{right:16px;top:186px;width:160px;padding:10px}#fuelVolume{font-size:16px}#fuelStatus{font-size:8px}}
@media(min-width:851px){#fuelGauge{top:30px;right:252px;width:170px}.cockpit-mode #fuelGauge{top:20px;right:203px}}
.cockpit-mode #cameraTools{left:auto;right:34px;max-width:55vw;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:850px){.cockpit-mode #cameraTools{right:16px;max-width:58vw}}
.audio-controls{display:grid;grid-template-columns:1fr auto;gap:7px 18px;align-items:center;margin:14px 0 18px}.audio-controls label{font-size:12px;color:#bfcdc1}.audio-controls output{float:right;font-variant-numeric:tabular-nums}.audio-controls input{grid-column:1;accent-color:var(--lime);width:100%;margin:0}.audio-controls button{grid-column:2;grid-row:1/3;margin:0;font-size:11px;padding:10px 13px;width:auto}

.audio-settings{margin:12px 0;border:1px solid #ffffff30;border-radius:6px;background:#111b17c9}.audio-settings summary{cursor:pointer;padding:12px 14px;font-size:12px;color:var(--lime)}.audio-settings .audio-controls{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 14px;margin:0 0 14px}.audio-settings .audio-controls button{width:100%;margin-top:4px}.audio-settings .audio-controls p{font-size:10px;margin:0;line-height:1.4}.audio-settings input:focus-visible,.audio-settings summary:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

/* Race information stays visible; keyboard help lives in Settings. */
footer>div,#cameraHint,#telemetry .sensors,#surface,header .wordmark span,header .session{display:none!important}
/* The circuit name lives at the top of the map card (#mapTitle); the wordmark stays only where the map is hidden. */
body:not(.immersive-stage):not(.start-scene):not(.pit-open) header{display:none}
footer{left:auto}#cameraTools{gap:6px;bottom:22px}#cameraTools button{font-size:10px;padding:9px 12px}#telemetry{width:190px;padding:14px;bottom:84px}.speed strong{font-size:48px}.bar{margin-bottom:0}
#timing .position-row{margin-top:10px}#timing .position-row b{color:#f7d164}#valid[hidden]{display:none!important}#valid{color:#ffb789}#raceResult:not([hidden]){display:block!important;color:#f5d96d;font-weight:700}
#immersiveHud .imm-brand,#immersiveHud .imm-meters>span:first-child,#immersiveHud .imm-meters>span:last-child{display:none}#immersiveHud .imm-meters{margin-top:0}#immersiveHud{width:165px;padding:12px}#immAlert:empty{display:none}#settingsResume[hidden]{display:none}#settingsResume{background:#e8ce58;color:#152822}#settingsBack{font-size:11px}

body:not(.touch-device) #cameraTools{left:34px;right:auto;max-width:calc(100vw - 190px);justify-content:flex-start}body:not(.touch-device) footer{z-index:6}
#lapBanner[hidden]{display:none!important}
/* Crossing the line: one line at the top, no frame over the road ahead: the lap time and how far it is from the best lap before it (green faster, red slower). */
#lapBanner{position:absolute;top:clamp(18px,4vh,40px);left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:baseline;gap:14px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums;text-shadow:0 1px 2px #000,0 2px 12px #000b;animation:lapBanner 5s ease forwards}
#lapBannerTime{font-size:32px;font-weight:700;letter-spacing:-.5px;color:#fff}
#lapBannerDelta{font-size:24px;font-weight:800;letter-spacing:-.3px}
#lapBannerDelta:empty,#lapBannerNote:empty{display:none}
#lapBanner.faster #lapBannerDelta{color:#7cf08a}
#lapBanner.slower #lapBannerDelta{color:#ff8a70}
#lapBannerNote{font-style:normal;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#ffb789}
#lapBanner.invalid #lapBannerTime{color:#ffb789}
@keyframes lapBanner{0%{opacity:0;transform:translate(-50%,-8px)}6%,88%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
.immersive-stage #lapBanner{display:none}
.touch-device #lapBanner{top:max(10px,env(safe-area-inset-top));gap:9px}
.touch-device #lapBannerTime{font-size:21px}
.touch-device #lapBannerDelta{font-size:16px}
.touch-device #lapBannerNote{font-size:8px}


/* P, or leaving the window, freezes the race and keeps it on screen: a small badge, not the menu. */
#pauseBadge{position:absolute;left:50%;top:16px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:9px;background:var(--glass);color:#f5f6ed;border:1px solid #fff2;border-radius:20px;padding:8px 15px;font:700 11px/1 Inter,"Segoe UI",Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;cursor:pointer}
#pauseBadge[hidden]{display:none}#pauseBadge .bars{width:9px;height:11px;border-left:3px solid var(--lime);border-right:3px solid var(--lime)}
#pauseBadge small{font-weight:400;font-size:10px;letter-spacing:.5px;text-transform:none;opacity:.75}
/* Short race events stay below the line of sight and never intercept the controls. */
#raceAction{position:absolute;left:50%;bottom:clamp(100px,17vh,170px);transform:translateX(-50%);z-index:3;pointer-events:none;text-align:center;min-width:190px;padding:10px 22px 11px;border-left:2px solid #e6c977;border-right:2px solid #e6c977;background:linear-gradient(90deg,transparent,#111b21d9 18%,#111b21d9 82%,transparent);color:#fff5d7;text-shadow:0 1px 5px #000}
#raceAction[hidden]{display:none}#raceAction strong{display:block;font:800 17px/1.15 Inter,"Segoe UI",sans-serif;letter-spacing:2px}#raceAction span{display:block;margin-top:5px;font:500 10px/1.2 Inter,"Segoe UI",sans-serif;letter-spacing:1px;color:#e3e7e9}#raceAction[data-kind=impact]{border-color:#f4a073;color:#ffd2b0}
@media(pointer:coarse){#raceAction{bottom:100px;padding:7px 14px;min-width:155px}#raceAction strong{font-size:13px}}
/* Ghost lap (G): its lap and the live gap on the timing panel, the buttons lit while it runs, the lap banner's note when a lap becomes it. */
#ghostInfo{display:block;margin-top:9px;font-size:10px;letter-spacing:1.5px;color:#9fe6ff;font-variant-numeric:tabular-nums}#ghostInfo[hidden]{display:none!important}#ghostInfo b{float:right;color:#c8f6ff;font-weight:500;letter-spacing:0}#ghostGap{display:block;clear:both;text-align:right;font-style:normal;font-size:15px;font-weight:800;letter-spacing:0;margin-top:2px}#ghostGap:empty{display:none}#ghostGap.ahead{color:#7cf08a}#ghostGap.behind{color:#ff8a70}#cameraTools #ghostButton.active,#touchGhost.active{color:#9fe6ff;border-color:#7fdcff}#lapBanner.ghost-saved #lapBannerNote{color:#9fe6ff}