/* Viewport workspace: the circuit is the focus, every control has a place. */
:root{--bg:#f4f4f2;--panel:#fff;--ink:#17171c;--muted:#696970;--line:#dedee1;--soft:#ededee;--race-muted:#696970}
html[data-theme=dark]{--bg:#101014;--panel:#19191f;--ink:#f5f5f7;--muted:#a1a1ad;--line:#303039;--soft:#23232c;--race-muted:#a1a1ad}
header{height:60px;max-width:none;padding:0 24px;background:var(--bg);border:0}
.brand{font-size:23px}.brand-mark{width:24px;height:21px}.header-label{border:0;padding:0;letter-spacing:1.5px;font-size:9px}.theme{border:1px solid var(--line);background:var(--panel);border-radius:8px;font-size:11px;min-height:34px;padding:7px 10px}
main{max-width:none;padding:0 24px 12px;height:calc(100dvh - 60px);display:grid;grid-template-rows:96px 32px minmax(0,1fr) 28px;gap:8px}
.selection{grid-template-columns:1.15fr 1fr 1fr;gap:12px;padding:0;align-items:stretch;min-height:0}
.visual-choice{height:96px;border-radius:10px;background:#19191f;box-shadow:none;border-color:#ffffff14;padding:14px 18px}
.visual-choice:before{height:2px}.choice-label{top:12px;left:16px;font-size:9px;letter-spacing:1px}.choice-title,.team-choice .choice-title,.driver-choice .choice-title{left:16px;bottom:13px;font-size:16px;line-height:1.3;max-width:60%}.choice-title small{font-size:9px;margin-top:4px}.choice-arrow{top:10px;right:12px;width:24px;height:24px;min-height:0;font-size:14px}.choice-track{width:114px;height:70px;right:48px;top:14px}.choice-car{width:53%;right:32px;top:37px}.choice-logo{left:auto;right:42px;top:14px;height:17px;max-width:64px}.choice-driver{width:108px;right:36px;top:2px}.driver-choice:after{background:linear-gradient(90deg,#19191f 30%,transparent 85%),linear-gradient(0deg,#19191f,transparent 40%)}
.selection-tools{margin:0;gap:12px;min-width:0}.selection-tools .profile-context{font-size:10px;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection-tools #resetProfile{font-size:10px;min-height:28px;padding:4px 8px;color:var(--muted)}
.practice-workspace{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:16px;min-height:0}.drive-panel{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 88px;gap:10px}
.stage{height:auto;min-height:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink);box-shadow:none;overflow:hidden}.stage:before,.stage:after{display:none}.stage .overline{color:var(--muted);font-size:9px;letter-spacing:1px}.stage-heading{left:20px;right:20px;top:18px}.stage h1{font-size:clamp(24px,2.3vw,36px);margin:5px 0 0;letter-spacing:-.7px}.stage h1.long-title{font-size:clamp(19px,1.8vw,27px)}.track-meta{font-size:16px;gap:18px;padding-top:4px}.track-meta span{font-size:8px;color:var(--muted);margin-top:4px}.canvas-wrap{inset:82px 140px 58px}
.gear-hud{left:20px;top:46%;width:122px;transform:translateY(-25%)}#gear{font-size:86px;letter-spacing:-5px;color:var(--ink);line-height:1.1}.gear-unit{font-size:14px;color:var(--muted)}.gear-line{gap:8px}.gear-rail{margin-top:9px;gap:3px;width:98px}.gear-rail i{height:3px;background:var(--line)}.phase{color:var(--red);background:none;border:0;border-radius:0;padding:0;margin-top:12px;font-size:9px}.gear-hud h2{font-size:11px;line-height:1.4;margin-top:7px}.next-hud{right:20px;top:46%;width:115px;border:0;border-top:1px solid var(--line);padding:13px 0 0}.next-hud h2{font-size:17px;color:var(--ink);margin:9px 0 10px}.next-data{color:var(--muted);font-size:10px}.next-data strong{font-size:24px;color:var(--ink)}
.session-readout{left:20px;right:auto;bottom:18px;gap:6px;color:var(--muted);font-size:8px}.session-readout strong{font-size:17px;color:var(--ink)}.phase-track{gap:4px;margin-left:12px}.phase-track span{font-size:8px;border:0;padding:4px 5px;color:var(--muted)}.phase-track span.active{color:var(--ink);background:var(--soft);border:0}.scene-toolbar{left:auto;right:16px;bottom:13px;gap:10px}.scene-toolbar>span{display:none}.scene-toolbar button{color:var(--muted);border:1px solid var(--line);background:var(--panel);min-height:32px;padding:7px 9px;border-radius:6px;font-size:9px}.scene-toolbar button[aria-pressed=true]{background:var(--ink);color:var(--panel)}.view-actions{gap:6px}.stage .track-marker{background:var(--panel);color:var(--ink);border:1px solid var(--line);width:27px;height:27px;min-height:27px;box-shadow:0 2px 5px #00000012}.stage .track-marker.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 0 4px #ff1e0012}
.controls{margin:0;padding:12px 16px 10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;min-height:0}.controls-row{gap:12px}.play-group{gap:6px;padding:0;border:0;background:none}.play{min-width:165px;min-height:34px;padding:7px 12px;border-radius:6px;background:var(--red);color:#fff;border-color:var(--red)}.play span{font-size:11px}.play[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--panel)}.icon-button{min-width:34px;min-height:34px;padding:6px;border:1px solid var(--line);border-radius:6px}.icon-button svg{width:16px;height:16px}.lap-position strong{font-size:13px}.lap-position>span{font-size:10px}.speed{font-size:10px;gap:8px}.speed select{min-height:30px;font-size:11px;border-color:var(--line);background:var(--panel)}input[type=range]{margin:15px 0 5px;height:3px}input[type=range]::-webkit-slider-thumb{width:13px;height:13px}
.corners{margin:0;min-height:0;display:flex;flex-direction:column;gap:10px}.corners-heading{display:block;margin:0;padding:3px 0 0}.corners-heading h2{font-size:14px;margin:0 0 5px}.corners-heading span{font-size:9px;color:var(--muted)}#cornerList{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(62px,1fr);flex:1;min-height:0;overflow:auto;gap:7px;border:0;padding:0 3px 0 0;scrollbar-width:thin}.corner-card,.corner-card:first-child,.corner-card:last-child{padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:grid;grid-template-columns:minmax(0,1fr) 56px;gap:8px;align-items:center;overflow:hidden;min-height:62px}.corner-card.active{background:var(--panel);border-color:var(--red)}.corner-card.active:before{display:none}.corner-card button{position:relative;min-height:40px;border-radius:4px;display:grid;grid-template-columns:1fr 44px;grid-template-rows:15px auto;gap:3px 6px;padding:0}.corner-card .number{font-size:8px;letter-spacing:.4px;grid-column:1;line-height:1.4}.corner-card h3{font-size:11px;line-height:1.3;margin:0;white-space:normal;grid-column:1;grid-row:2}.corner-map{height:28px;width:44px;margin:0;grid-column:2;grid-row:1/3;align-self:center;color:var(--muted)}.corner-card label{border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:8px}.corner-card select{font-size:12px;min-height:26px;padding:2px 3px;max-width:56px;border:1px solid var(--line);border-radius:5px;background:var(--panel)}
.bottom-bar{display:flex;align-items:center;gap:24px;min-width:0;position:relative}.help{margin:0;padding:0;border:0;max-width:none;flex-shrink:0;color:var(--muted)}.help summary{font-size:10px}.help[open]{position:absolute;bottom:0;left:0;z-index:12;background:var(--panel);padding:18px;border:1px solid var(--line);border-radius:10px;width:min(640px,90vw);box-shadow:0 12px 40px #0002}.help p{font-size:12px;line-height:1.6}.help[open] summary{color:var(--ink)}footer{flex:1;min-width:0;gap:18px;font-size:8px;line-height:1.4;flex-wrap:nowrap}footer span{margin-right:auto}footer a{white-space:nowrap}
.picker-dialog{border-radius:12px}.picker-header{padding:20px 24px}.picker-grid{padding:20px 24px;gap:10px}.picker-card{border-radius:8px}.picker-header h2{font-size:22px}.picker-dialog::backdrop{backdrop-filter:none;background:#05050caa}.picker-close{width:36px;height:36px;min-height:36px}.icon-layer{filter:none!important;scale:1!important;transition:opacity 150ms ease-out}
button{transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out,transform 150ms ease-out}button:not(:disabled):not(.track-marker):active{scale:1;transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.visual-choice:hover{background:#25252d;border-color:#ffffff60}.corner-card:hover{background:var(--soft)}.scene-toolbar button:hover{background:var(--soft);color:var(--ink)}.stage .track-marker:not(.active):hover{background:var(--ink);color:var(--panel);border-color:var(--ink)}}
@media(min-width:1000px) and (min-height:650px){html,body{height:100%;overflow:hidden}}
@media(min-width:1700px){header{padding:0 32px}main{padding:0 32px 16px;grid-template-rows:112px 34px minmax(0,1fr) 28px;gap:12px}.visual-choice{height:112px}.choice-title,.team-choice .choice-title,.driver-choice .choice-title{font-size:19px;bottom:17px}.choice-track{height:82px;width:145px;top:15px}.choice-driver{width:132px}.choice-car{top:41px}.practice-workspace{grid-template-columns:minmax(0,1fr) 300px;gap:20px}.corner-card h3{font-size:13px}.corner-card{padding:14px}.corner-card .number,.corner-card label{font-size:9px}.corner-map{width:54px;height:36px}.corner-card button{grid-template-columns:1fr 54px}.canvas-wrap{inset:92px 160px 68px}#gear{font-size:110px}.gear-hud{width:140px}.next-hud{width:140px}.next-hud h2{font-size:21px}.stage-heading{left:24px;right:24px;top:24px}.gear-hud{left:24px}.next-hud{right:24px}}
@media(max-width:999px),(max-height:649px){main{height:auto;display:block;padding:0 16px 16px}header{padding:0 16px}.selection{margin-bottom:8px}.selection-tools{margin-bottom:10px}.practice-workspace{grid-template-columns:minmax(0,1fr) 240px;min-height:580px}.drive-panel{grid-template-rows:minmax(440px,1fr) 88px}.bottom-bar{margin-top:16px}footer span{display:none}.canvas-wrap{inset:84px 100px 80px}.phase-track{display:none}.gear-hud{width:95px;left:14px}#gear{font-size:68px}.next-hud{width:95px;right:14px}}
@media(max-width:700px){.selection{grid-template-columns:1fr 1fr}.visual-choice.circuit-choice{grid-column:1/-1;height:96px}.visual-choice{height:108px}.choice-title,.team-choice .choice-title,.driver-choice .choice-title{font-size:13px}.choice-car{width:72%;top:44px;right:8px}.choice-driver{right:8px}.choice-logo{right:30px}.practice-workspace{display:block;min-height:0}.drive-panel{display:grid;grid-template-rows:480px 100px}.canvas-wrap{inset:80px 0 150px}.gear-hud{top:auto;bottom:70px;transform:none;left:16px}.next-hud{top:auto;bottom:90px;right:16px}.track-meta{display:none}.stage h1{font-size:24px}.scene-toolbar{right:10px;bottom:12px}.scene-toolbar button span{display:none}.session-readout{left:16px;bottom:20px}.corners{margin-top:16px}#cornerList{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.corner-card,.corner-card:first-child,.corner-card:last-child{padding:10px!important;min-height:80px}.corner-card button{grid-template-columns:1fr}.corner-map{display:none}.corner-card h3{font-size:11px}.controls{padding:12px 10px}.play{min-width:120px}.play span{font-size:9px}.lap-position>span{font-size:8px}.speed{gap:4px}.speed>span{display:none}.bottom-bar{gap:16px}footer{gap:10px;font-size:7px}.header-label{display:none}.theme{font-size:9px}.selection-tools .profile-context{font-size:8px}.selection-tools #resetProfile{font-size:8px}}
button:focus-visible:active{transform:none!important}
.brand{font-size:20px;letter-spacing:-.7px}.brand-mark{width:20px;height:17px;margin-right:8px}
.race-preload{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;pointer-events:none;animation:preload-fallback 1.2s forwards}
.preload-content{display:flex;align-items:center;flex-direction:column;gap:20px}.preload-mark{width:35px;height:25px;background:linear-gradient(transparent 0 13%,var(--red) 13% 38%,transparent 38% 54%,var(--red) 54% 79%,transparent 79%);transform:skew(-25deg)}.start-lights{display:flex;gap:9px}.start-lights i{width:10px;height:10px;background:var(--red);border-radius:50%;box-shadow:0 0 14px #ff1e0018}.preload-label{font-size:10px;letter-spacing:3px;color:var(--muted)}
@keyframes preload-fallback{0%,70%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
.visual-choice,.corner-card,.controls,.theme{border-radius:12px}.scene-toolbar button,.corner-card select,.speed select,.play,.icon-button{border-radius:8px}
.choice-arrow{transition:transform 180ms cubic-bezier(.23,1,.32,1),background-color 180ms ease-out,color 180ms ease-out}
@media(hover:hover) and (pointer:fine){
 body,button,a,select,summary,input,canvas{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M3 29V3' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M3 29V3' stroke='%2317171c' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 4h20v14H4z' fill='white' stroke='%2317171c'/%3E%3Cpath d='M4 4h5v5H4zm10 0h5v5h-5zm-5 5h5v5H9zm10 0h5v5h-5zM4 14h5v4H4zm10 0h5v4h-5z' fill='%2317171c'/%3E%3C/svg%3E") 3 3,auto}
 button,a,select,summary,input{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M3 29V3' stroke='white' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M3 29V3' stroke='%23ff1e00' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M4 4h20v14H4z' fill='white' stroke='%23ff1e00'/%3E%3Cpath d='M4 4h5v5H4zm10 0h5v5h-5zm-5 5h5v5H9zm10 0h5v5h-5zM4 14h5v4H4zm10 0h5v4h-5z' fill='%23ff1e00'/%3E%3C/svg%3E") 3 3,pointer}
 .visual-choice:hover .choice-arrow{transform:translate(2px,-2px)}.theme:hover,.icon-button:hover{background:var(--soft)}.corner-card button:hover .corner-map{color:var(--red)}
}
@media(prefers-reduced-motion:reduce){.race-preload{display:none}.choice-arrow{transition:none!important}.visual-choice:hover .choice-arrow{transform:none}}
/* Open circuit surface, without enclosing modules or decorative strokes. */
.stage{background:transparent;border:0;border-radius:0;box-shadow:none}
.next-hud{border:0}
.controls{background:transparent;border:0;box-shadow:none}
.visual-choice{border:0}
.visual-choice:before{display:none}
.corner-card,.corner-card:first-child,.corner-card:last-child,.corner-card.active{border:0;box-shadow:none}
.corner-card.active{background:var(--red-soft)}
.theme,.icon-button,.scene-toolbar button,.corner-card select,.speed select{border:0;box-shadow:none}
@media(hover:hover) and (pointer:fine){.visual-choice:hover,.scene-toolbar button:hover{border-color:transparent}}
@media(min-width:1000px) and (min-height:650px){.many-zones{grid-template-columns:minmax(0,1fr) 340px}.many-zones #cornerList{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);overflow:hidden}.many-zones .corner-card{min-height:0;padding:8px;grid-template-columns:minmax(0,1fr) 47px;gap:4px}.many-zones .corner-map{display:none}.many-zones .corner-card button{grid-template-columns:1fr}.many-zones .corner-card h3{font-size:10px}.many-zones .corner-card label{font-size:7px}.many-zones .corner-card select{max-width:47px;font-size:10px}}
@media(prefers-reduced-motion:reduce){button,.icon-layer{transition:none!important}button:active{transform:none!important}}

/* Original vector wordmark; intrinsic ratio prevents layout shifts. */
.brand{flex-shrink:0}.brand-logo{display:block;width:clamp(160px,19vw,240px);height:auto} @media(max-width:700px){.brand-logo{width:180px}} @media(max-width:360px){.brand-logo{width:150px}}

/* Theme-aware selection surfaces and the red loading wordmark. */
.brand-logo{width:152px;height:auto}@media(max-width:700px){.brand-logo{width:136px}}
html:not([data-theme=dark]) .visual-choice{background:var(--panel);color:var(--ink)}
html:not([data-theme=dark]) .choice-label,html:not([data-theme=dark]) .choice-title small{color:var(--muted)}
html:not([data-theme=dark]) .choice-arrow{color:var(--ink);background:var(--soft);border:0}
html:not([data-theme=dark]) .choice-track{color:var(--ink)}
html:not([data-theme=dark]) .choice-logo{filter:brightness(0)}
html:not([data-theme=dark]) .driver-choice:after{background:linear-gradient(90deg,#fff 30%,transparent 85%),linear-gradient(0deg,#fff,transparent 40%)}
@media(hover:hover) and (pointer:fine){html:not([data-theme=dark]) .visual-choice:hover{background:#fafafa}html:not([data-theme=dark]) .visual-choice:hover .choice-arrow{background:var(--ink);color:var(--panel)}}
.race-preload{background:#ff1e00;animation-duration:1.6s}.preload-wordmark{position:relative;font:700 italic clamp(32px,6vw,72px)/1 'Formula 1';letter-spacing:-2px;color:#ffffff30}.preload-wordmark>span{display:block}.preload-fill{position:absolute;inset:0;color:#fff;transform-origin:left center;overflow:hidden}

.preload-wordmark{width:min(420px,64vw);font-size:0;letter-spacing:0}.preload-wordmark img{display:block;width:100%;height:auto;filter:brightness(0) invert(1)}.preload-base{opacity:.2}.preload-fill{clip-path:inset(0 100% 0 0)}

/* Full stage viewport removes the inner top and bottom crop. */
.stage{overflow:visible}.stage .canvas-wrap{inset:0;overflow:visible}