:root{font-family:Segoe UI,Arial,sans-serif;color:#17292d;background:#f5f1e8;font-synthesis:none;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a,input{touch-action:manipulation}button{font:600 14px/1.15 Segoe UI,Arial,sans-serif;min-height:44px;padding:10px 16px;border:1px solid #a5aeaa;border-radius:6px;background:#f5f1e8;color:#17292d;cursor:pointer}button:hover{background:#e6e4d9}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d44f1f;outline-offset:3px}button.primary,.accelerate{background:#ef6b32;border-color:#ef6b32;color:#16262c}button.primary:hover{background:#ff8b54}button[aria-pressed=false]{background:#d8dfdc;color:#4e6063}button.active{background:#38b9b0;transform:translateY(1px)}#lab{height:100dvh;min-height:500px;display:flex;flex-direction:column}header{height:66px;flex:none;display:flex;align-items:center;padding:10px 22px;gap:18px;border-bottom:1px solid #c9cec7}h1{font-size:27px;line-height:1.05;letter-spacing:-1px;margin:0;font-weight:750}h1 span{font-weight:400}nav{margin-left:auto;display:flex;gap:8px}.brand{text-decoration:none;font-weight:900;color:#17292d;font-size:22px;white-space:nowrap}.brand span{color:#ef6b32}#viewport{flex:1;position:relative;min-height:180px;overflow:hidden;background:#a7d9df}canvas{width:100%;height:100%;display:block}.hud{position:absolute;top:20px;left:22px;background:#17292de8;color:#f8f3e8;padding:16px 18px;border-radius:7px;width:300px;pointer-events:none}.hud small{color:#9ce6d5;font-size:11px;letter-spacing:1px;text-transform:uppercase}.hud h2{font-size:22px;line-height:1.2;margin:5px 0 7px}.hud p{font-size:14px;line-height:1.4;margin:0;color:#e0e9e3}#progress{margin-top:10px;font-size:13px;color:#ffc59b}#telemetry{position:absolute;bottom:18px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none}.speed,.systems{background:#17292de8;color:#f8f3e8;border-radius:7px;padding:10px 16px}.speed strong{font-size:42px;line-height:1;font-variant-numeric:tabular-nums}.speed span{font-size:13px;margin-left:6px;color:#c7d5d1}.systems{width:210px;font-size:12px}.systems>span{display:block;font-size:10px;letter-spacing:1.1px;color:#9ce6d5;margin-bottom:7px}.systems label{display:block}.systems b{float:right}meter{display:block;width:100%;height:12px;margin-top:6px;accent-color:#38b9b0}#toast{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);max-width:85%;padding:10px 16px;border-radius:6px;background:#17292df2;color:#fff;text-align:center;font-size:14px;pointer-events:none}#toast:empty{display:none}#controls{display:flex;gap:20px;justify-content:space-between;padding:10px 22px;flex:none;border-top:1px solid #c9cec7}.drive-controls,.system-controls{display:flex;gap:7px}#controls button{min-width:65px;user-select:none;-webkit-user-select:none;touch-action:none}kbd{font:11px Segoe UI,sans-serif;opacity:.65;margin-left:4px}footer{display:flex;gap:15px;padding:0 22px 7px;align-items:center;font-size:11px;color:#53676a}footer span{flex:1}footer button{font-size:11px;border:0;background:none;min-height:28px;padding:3px}dialog{border:1px solid #b7c3bb;background:#f5f1e8;color:#17292d;border-radius:12px;padding:26px;width:min(760px,calc(100% - 28px));max-height:calc(100dvh - 28px);box-shadow:0 24px 90px #0a202965}dialog::backdrop{background:#10292d72;backdrop-filter:blur(5px)}dialog h2{font-size:32px;letter-spacing:-1px;line-height:1.12;margin:14px 0 8px}dialog p{font-size:14px;line-height:1.5}dialog a{color:#087369}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.wordmark{font-size:10px;letter-spacing:1.5px;font-weight:750;color:#52666a}.intro{margin:0 0 20px;color:#53676a}#mode-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}#mode-list button{text-align:left;min-height:94px;padding:13px 15px;background:#fffdf8;border-color:#cdd2c9}#mode-list button[data-completed=true]{border-color:#16897b;background:#eef8ef}#mode-list button:hover{border-color:#d76130;background:#fff5e7}#mode-list small{display:block;color:#5b7273;font-size:10px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}#mode-list strong{display:block;font-size:18px;margin-bottom:5px}#mode-list span{display:block;font-weight:400;font-size:12px;line-height:1.3;color:#53676a}.menu-bottom{display:flex;align-items:center;gap:8px;margin-top:17px}.menu-bottom>span{margin-left:auto;font-size:11px;max-width:150px;color:#53676a}.fine{font-size:11px!important;color:#5e6d6c;margin:15px 0 0}.setting{display:flex;gap:12px;align-items:center;min-height:52px;border-bottom:1px solid #d5dad1;font-size:16px}.setting input{width:20px;height:20px;accent-color:#d85825}#settings-dialog,#result{max-width:480px}.result-actions{display:flex;gap:10px;margin-top:25px}#result-label{letter-spacing:1px;color:#47746d}#info-dialog h3{font-size:19px}#error{position:absolute;inset:25%;padding:20px;background:#f5f1e8;z-index:4}
@media(max-width:700px){header{height:60px;padding:8px 12px;gap:10px}.brand{font-size:18px}h1{font-size:20px;letter-spacing:-.6px;max-width:170px}h1 span{display:block}nav{gap:5px}nav button{padding:8px 10px;font-size:12px}.hud{top:12px;left:12px;width:245px;padding:11px 13px}.hud h2{font-size:18px}.hud p{font-size:12px}.hud small{font-size:9px}#progress{font-size:11px;margin-top:6px}#telemetry{bottom:12px;left:12px;right:12px}.speed,.systems{padding:9px 11px}.speed strong{font-size:30px}.systems{width:155px;font-size:11px}#controls{padding:8px 10px;gap:7px;flex-direction:column}.drive-controls,.system-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}#controls button{min-width:0;font-size:12px;padding:9px 4px;min-height:46px}kbd{display:none}footer{padding:0 10px 5px;justify-content:center;gap:12px}footer span{display:none}footer button{min-height:30px}dialog{padding:18px;width:calc(100% - 24px)}dialog h2{font-size:25px;margin:12px 0 7px}.intro{font-size:12px;margin-bottom:12px}#mode-list{gap:7px}#mode-list button{min-height:91px;padding:10px}#mode-list strong{font-size:15px}#mode-list span{font-size:11px}#mode-list small{font-size:8px;letter-spacing:.3px}.menu-bottom{gap:7px;flex-wrap:wrap;margin-top:12px}.menu-bottom button{font-size:12px;padding:10px}.menu-bottom>span{font-size:10px;max-width:100%;margin:0}.fine{font-size:10px!important;margin-top:10px}.wordmark{font-size:8px;letter-spacing:1px}#close-menu{font-size:12px;padding:8px;min-height:38px}}
@media(max-height:700px) and (min-width:701px){dialog{padding:18px}dialog h2{font-size:28px;margin:7px 0}#mode-list button{min-height:75px}.intro{margin-bottom:12px}.hud{top:12px;padding:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}button.active{transform:none}}

/* Contextual coaching stays inside the existing objective, away from the car. */
#coach{pointer-events:auto;margin-top:10px;border-top:1px solid #ffffff30;padding-top:9px}#cue-title{font-size:16px;color:#ffbf81;letter-spacing:.5px}#cue-copy{font-size:12px;margin-top:5px}#coach button{min-height:44px;padding:7px 10px;margin-top:7px;font-size:11px;background:transparent;color:#d5e8e7;border-color:#597474}.cue{box-shadow:0 0 0 3px #e87929 inset}#benchmark{position:absolute;right:18px;top:18px;max-width:285px;background:#17292de8;color:#f4edda;padding:12px;border-radius:6px;font-size:12px}#benchmark strong,#benchmark span{display:block;margin-bottom:6px}#benchmark button{font-size:12px}.volume-setting input{flex:1;width:100%;min-height:44px}.volume-setting output{min-width:40px}#controls{gap:12px}.system-controls{gap:5px}#controls button{min-width:58px;padding:9px 8px}footer button{min-height:32px}#brake-dialog{max-width:520px}
@media(max-width:700px){#controls{gap:6px;padding:6px 10px}.system-controls{grid-template-columns:repeat(4,1fr);gap:5px}#controls button{min-width:0;padding:7px 3px;min-height:44px;font-size:11px}.system-controls button:last-child{grid-column:span 2}footer{gap:3px}footer button{font-size:10px;padding:3px 6px}.hud{width:230px;padding:9px 11px}.hud p{font-size:11px}.hud h2{font-size:17px}#coach{margin-top:6px;padding-top:6px}#cue-title{font-size:13px}#cue-copy{font-size:11px}#coach button{margin-top:4px;padding:5px 8px}#benchmark{top:auto;bottom:66px;left:12px;right:12px;max-width:none;padding:7px 10px;font-size:10px}#benchmark strong{display:none}#benchmark span{margin-bottom:3px}#benchmark button{min-height:44px;font-size:11px;padding:6px}.hud:has(#coach:not([hidden]))>p{display:none}#mode-list button{min-height:85px}}

footer button{min-height:44px}@media(max-width:700px){#viewport:has(#benchmark:not([hidden])) .hud{width:calc(100% - 153px)}#benchmark{top:12px;bottom:auto;left:auto;right:12px;width:129px;font-size:10px;padding:8px}#benchmark button{width:100%;font-size:10px}#benchmark span{line-height:1.4}}

/* Orange is reserved for enabled or engaged control state, never a CTA or focus cue. */
button.primary,.accelerate,button.primary:hover,button:hover,button[aria-pressed=false],#mode-list button:hover{background:#f5f1e8;border-color:#a5aeaa;color:#17292d}
button[aria-pressed=true],button[aria-pressed=true]:hover,button.active,button.active:hover{background:#ef6b32;border-color:#ef6b32;color:#17292d}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2468b4;outline-offset:3px}
button.cue{box-shadow:none;outline:2px dashed #287b91;outline-offset:2px}
button.cue:focus-visible{outline:3px solid #2468b4;outline-offset:3px}
.setting:has(input[type=checkbox]){padding:4px 10px;border-radius:6px;background:transparent;color:#17292d}
.setting:has(input[type=checkbox]:checked){background:#ef6b32;border-color:#ef6b32}
.setting input[type=checkbox]{accent-color:#ef6b32}
.setting input[type=range]{accent-color:#2468b4}

#instruments{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:6px 22px;border-top:1px solid #c9cec7;border-bottom:1px solid #c9cec7;background:#edf0e9;flex:none;color:#465c60;font-size:11px}#instruments span{text-align:center;white-space:nowrap}#instruments b{color:#17292d;font-size:13px;font-variant-numeric:tabular-nums;margin-left:7px}@media(max-width:700px){#instruments{padding:4px 8px;gap:3px;font-size:9px}#instruments b{display:block;margin:2px 0 0;font-size:12px}}

#launch-clock{position:absolute;top:14px;left:50%;right:auto;transform:translateX(-50%);text-align:right;color:#fff;text-shadow:0 2px 5px #000;background:#17292dd9;border-radius:10px;padding:8px 14px;pointer-events:none}#launch-clock small{font-size:10px;letter-spacing:1px}#launch-clock strong{display:block;font-size:42px;font-variant-numeric:tabular-nums;line-height:1.1}#launch-clock em{font-size:18px;font-style:normal}@media(max-width:700px){#launch-clock{top:auto;bottom:79px;right:8px;left:auto;transform:none;padding:6px 9px}#launch-clock strong{font-size:30px}#launch-clock small{font-size:8px}}

/* Driving cues stay out of the central sightline and never intercept input. */
#flip-cue{position:absolute;top:14px;right:14px;left:auto;transform:none;width:min(240px,30%);padding:9px 11px;background:rgba(15,31,36,.72);color:#fff;text-align:left;border:1px solid #ffffff40;border-radius:6px;pointer-events:none;text-shadow:0 1px 2px #000}
#flip-cue strong{display:block;font-size:15px;line-height:1.2;letter-spacing:.3px}
#flip-cue span{display:block;white-space:pre-line;font-size:13px;line-height:1.35;margin-top:4px}
#coach{display:none!important}
footer:has(#dismiss-tip:not([hidden])) #help{display:none}
#viewport:has(#flip-cue:not([hidden])) #objective p{display:none}
#viewport:has(#flip-cue:not([hidden])) #benchmark{top:112px}
#flip-brief{max-width:420px;padding:20px}
#flip-brief h2{font-size:26px;margin:0 0 12px}
#flip-brief p{font-size:14px;margin:8px 0;line-height:1.4}
#flip-brief button{min-height:44px;width:100%;margin-top:10px}
@media(max-width:700px){
 #flip-cue{top:8px;right:8px;width:34%;padding:7px;max-height:none}
 #flip-cue strong{font-size:12px}
 #flip-cue span{font-size:11px;line-height:1.3;margin-top:3px}
 #viewport:has(#flip-cue:not([hidden])) #objective{display:none}
 #viewport:has(#flip-cue:not([hidden])) #benchmark{top:auto;bottom:70px;left:8px;right:auto;width:130px}
 #flip-brief{padding:18px}
 #flip-brief h2{font-size:24px}
}

/* Brief status messages also leave the car and road center unobscured. */
#toast{top:112px;bottom:auto;left:auto;right:14px;transform:none;max-width:240px;pointer-events:none}
@media(max-width:700px){#toast{top:110px;right:8px;max-width:34%;font-size:11px;padding:7px}}

#toast[data-retry=true]{top:14px}@media(max-width:700px){#toast[data-retry=true]{top:8px}}