/* SX cockpit: bright scenery, dark instruments, orange action, purple overrun. */
:root{color-scheme:dark;--ink:#e6eefb;--muted:#90a4bf;--blue:#4aa7ff;--green:var(--blue);--lime:#152f4e;--paper:#09121f;--line:#263a53;--orange:#ffad4a}
body{background:radial-gradient(ellipse at 45% 0,#19334e 0,#0b1728 38%,#070e18 100%);min-height:100svh}
.app{max-width:1180px;padding-bottom:max(20px,env(safe-area-inset-bottom));position:relative}
header{height:74px;border-color:#20344b}.brand>b{color:#6fb7ff;letter-spacing:-2px}.brand-copy small{color:#839bb8}
.tools button{background:#142238;border-color:#30445e;color:#c5d7ee;box-shadow:inset 0 1px #ffffff09}
nav{padding-top:18px}.lesson{border-radius:9px;background:#111f32;border-color:#2a3c54;box-shadow:inset 0 1px #ffffff08}
.lesson.active{background:linear-gradient(135deg,#227ed1,#15508a);border-color:#55b2ff;box-shadow:0 0 20px #237ed12b,inset 0 1px #a1d5ff33;color:#fff}
.lesson.active>span{color:#b5dbff}.heading{margin-top:10px;margin-bottom:16px}.heading h1{font-weight:800;letter-spacing:.02em}.quiet{color:#8fa8c6}
.mission-track li{background:#13253b;color:#8da6c7}.mission-track li.current{background:#214872;color:#d6eaff}.mission-track li.done{color:#65b5ff}
.view{border:1px solid #314962;background:#0d1a2b;border-radius:16px;box-shadow:0 18px 48px #0005;overflow:hidden}
.scene{border:0;background:#c7d9b5}.scene-tags span,.scene-bottom span{background:#0c1d32cf;color:#e7f2ff;border:1px solid #cbe4ff33;backdrop-filter:blur(5px)}.motion-tag{background:#0b2136cf;color:#dbecff}
.scene-status{background:#142338;color:#afc7e3}
.meters{padding:12px 14px;grid-template-columns:minmax(150px,1.7fr) minmax(70px,1fr) minmax(52px,.7fr) minmax(52px,.75fr);background:linear-gradient(150deg,#172b44,#0a1525);border-top:1px solid #32516d;gap:12px;align-items:center}
.meters>div{border-color:#2e445e}.meter-label,.meters #rpmLabel{color:#8fa9c7;letter-spacing:.03em;font-size:10px}.meters strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;color:#f3f8ff}
.meters .rpm-box{position:relative;height:137px;min-width:0;text-align:center;isolation:isolate;padding:10px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:0}
.tach-dial{position:absolute;z-index:-1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tach-dial path{fill:none}.tach-track{stroke:#253d58;stroke-width:9}.tach-progress{stroke:#5ab7ff;stroke-width:9;stroke-dasharray:0 100;filter:drop-shadow(0 0 4px #3caaff77);transition:stroke-dasharray .06s linear}.tach-red{stroke:#b9565e;stroke-width:4}.tach-ticks path{stroke:#6986a7;stroke-width:2}.tach-dial text{fill:#859ebd;font:11px ui-monospace,monospace}.tach-high .tach-progress{stroke:#ff7f6c}
.meters #rpmLabel{position:absolute;top:40%;left:0;right:0;font-size:9px}.rpm-line{justify-content:center;gap:4px;margin-top:30px}.meters .rpm-line #rpm{font-size:32px;line-height:1}.rpm-line small{font-size:9px;color:#8fa9c7}.bars,.rpm-scale{display:none}
.rpm-prediction{font-size:10px;color:#7ec6ff;line-height:1.2;min-height:24px;margin-top:5px;white-space:pre-line;max-width:100%}.meters .speed-box{padding-left:0}.meters #speed{font-size:42px;letter-spacing:-.06em}.meters #speed small{font:9px sans-serif;color:#8fa9c7;letter-spacing:0;display:block;margin-top:4px}.meters #gearValue{font-size:48px;color:#6cbaff;text-shadow:0 0 20px #297bc366;line-height:1.1}.meters #gearNext{font-size:9px;color:#90a8c5}
.connection-box{padding-left:8px}.engine-feedback{background:#112137;border-top:1px solid #2b405b}.engine-feedback #viewButton{background:#1c3049;border-color:#3d5874;color:#bddcff}.engine-feedback .ignition{background:#1c3049;border-color:#3d5874;color:#c4dcf5}.key-caption small{color:#8fa8c5}.key-caption b{color:#c5e1ff}.mechanism-labels{color:#a6bdd5}.engine-feedback #clutchMechanism{filter:drop-shadow(0 0 5px #4faaff22)}
.coach{padding-top:0}.instructor-name{color:#9bb0c9}.coach-speech{background:linear-gradient(145deg,#182b44,#122137);border-color:#304966;border-radius:12px;box-shadow:inset 0 1px #ffffff08}.coach-speech::before{background:#172a43;border-color:#304966}.coach strong{color:#e7f1ff;font-size:15px}.coach p{color:#9fb4ce;font-size:12px;line-height:1.5}.coach-message{scrollbar-color:#36516f transparent}.action-cue{background:#47331b;color:#ffc16f;border-color:#ac7539}.coach.wear-warning .coach-speech{background:#39281c}.low-rpm-warning .coach-speech{border-color:#b76e4b}
.controls{padding-top:12px;gap:16px}.control-title{color:#d0e3f8}.control-title>span{color:#8ea7c5}.assist-toggle{background:#142941;color:#8fc8ff;border-color:#365471}.assist-toggle[aria-pressed=true]{background:#204b78;color:#d9edff}.assist-toggle:disabled{opacity:.65}
.controls .clutch{background:linear-gradient(135deg,#20344d,#101e30);border:1px solid #3a526d;box-shadow:inset 0 1px #fff1,inset 0 -10px 22px #0003;border-radius:14px}
.controls .clutch .rail{background:#3c5574;box-shadow:0 0 0 1px #0e1e32}.clutch .rail i{background:#48adff;box-shadow:0 0 12px #38a4ff66}.clutch .end-label{color:#a3b8d2}.controls .clutch .pedal-pad{background:repeating-linear-gradient(0deg,transparent 0 7px,#06101f88 7px 9px),linear-gradient(145deg,#5c7189,#25384c);border-color:#7d95b2;box-shadow:0 6px 0 #040b14,0 9px 12px #0008,inset 0 1px 1px #b6cce799}.controls .pedal-foot{opacity:.12;filter:brightness(1.8)}.controls .clutch-knob{color:#bdcfe5}.clutch .bite-guide{background:#459fe91c;color:#96c9ee;border-color:#5ca3d077}.pedal-readout{color:#c3dcf5}.control-note,.control-keys,.gas-label{color:#7f9cbe}.controls .clutch.wear-warning{background:#3c2a1d}
.shift-button{background:linear-gradient(#213b59,#152a43)!important;color:#9ed2ff!important;border-color:#3b5b7c!important;border-radius:9px;box-shadow:inset 0 1px #a9d6ff15}.shift-button:disabled{opacity:.4}.shift-status{color:#bcd4ee}.shift-diagram{filter:drop-shadow(0 5px 6px #0006)}
.foot-actions .park,.hill .foot-actions .park{background:#192a40;border:1px solid #3b4f68;color:#c3d4e8;border-radius:10px}.foot-actions .park small{color:#8fa6c1}.handbrake-illustration{filter:grayscale(.6) brightness(1.4)}.foot-actions .brake{background:linear-gradient(145deg,#2d4058,#192b40);border:1px solid #64758b;color:#e0eaf7;border-radius:10px;touch-action:none;user-select:none}.brake small{color:#9eb5cf}.brake.pressed{background:linear-gradient(110deg,#78432c,#3a2b2a);border-color:#ed9b63}
.next-action,.foot-actions .park.ready{outline:2px solid #ffad4a;outline-offset:2px;box-shadow:0 0 18px #ffad4a29!important}.clutch.next-action::after{color:#ffd49c}.key-tip,kbd{background:#1d334d!important;color:#9db5d1!important;border-color:#3a516d!important}.under-controls{color:#809ab9}.shortcut-strip{color:#718dad}.shortcut-strip button{color:#a1c2e6}footer{color:#6f87a4;border-color:#20354e}footer button{color:#9db6d1}
dialog{color:#e6effb;background:radial-gradient(ellipse at top left,#213d5b,#0f1c2e 70%);border:1px solid #476181;box-shadow:0 30px 100px #0009}.modal-mark{background:#2584d2;color:#f1f8ff;box-shadow:0 0 35px #2584d244}dialog .eyebrow{color:#91b5da}dialog p,dialog li,.modal-foot{color:#b2c5de}dialog .note{background:#14283f;border-color:#304d6c;color:#abc4e1}.primary{background:linear-gradient(120deg,#258dde,#155591);color:white;box-shadow:0 5px 20px #0004}.intro-steps{border-color:#335270;color:#bfd5ed}.intro-steps b{color:#6dbbff}.text-button{color:#9ac6f1}
.free-panel{background:radial-gradient(ellipse at top left,#164365,#102137 75%);border:1px solid #3e8abc;box-shadow:inset 0 1px #9bdbff22,0 5px 25px #0002}.race-label{color:#8fd7ff;letter-spacing:.12em}#raceTime{color:#f4fbff;text-shadow:0 0 24px #53c3ff55;font-family:ui-monospace,monospace;font-size:38px;font-weight:800}#raceDistance{color:#90bada}#raceBest,.race-result small{color:#9cb8d5}#raceProgress{accent-color:#5dc8ff}.race-share{background:linear-gradient(140deg,#318fd0,#1a5b98);color:#fff}.race-share[aria-disabled=true]{background:#203a52;color:#6f91af}#raceState{color:#a6c7e5}.free-panel[data-state=finished]{background:linear-gradient(120deg,#1a567a,#142841);border-color:#7ddfff;box-shadow:0 0 26px #55caff22}.free-panel[data-state=invalid] #raceState{color:#ffb59a}
.direct-gears[hidden],.free-telemetry[hidden]{display:none}.direct-gears{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:40px 32px 40px;gap:4px;position:relative;width:100%;max-width:190px;margin:6px auto}.direct-gears::before{content:'';position:absolute;inset:15px 18px;background:linear-gradient(90deg,transparent 0 1%,#5b7998 1% 3%,transparent 3% 49%,#5b7998 49% 51%,transparent 51% 97%,#5b7998 97% 99%,transparent 99%),linear-gradient(transparent 48%,#5b7998 48% 52%,transparent 52%);opacity:.5;pointer-events:none}.direct-gears button{z-index:1;background:linear-gradient(135deg,#294563,#172a40);border:1px solid #4c6580;border-radius:8px;color:#bed5ed;font:700 20px ui-monospace,monospace;touch-action:manipulation;min-height:32px}.direct-gears .neutral-choice{grid-column:1/-1;justify-self:center;width:44px;font-size:15px}.direct-gears button.selected{background:linear-gradient(140deg,#278fd2,#195b8d);border-color:#8bdfff;color:#fff;box-shadow:0 0 16px #43b5ff55}.direct-gears button.selecting{border-color:#ffc282;color:#ffd6a9;background:#594024}.direct-gears button[data-select-gear="-1"]{color:#ffb8ae}.direct-gears button[aria-disabled=true]:not(.selected):not(.selecting){opacity:.6}
.free-mode .controls{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr)}.free-mode .shifter-panel>.shift-diagram,.free-mode .shifter-panel>.shift-button{display:none}.free-mode .shifter-panel .control-title{margin-bottom:2px}.free-mode .control-keys{display:none}.free-telemetry{height:34px;display:flex;flex-direction:column;justify-content:center;gap:2px;margin-top:5px;overflow:hidden;font-size:10px;color:#8dabc9}.free-telemetry>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.free-telemetry .matched{color:#7de3b0}.free-mode .shift-status{display:block;text-align:center}.free-mode .gas-label{font-size:10px}
@media(max-width:760px){
 .app{padding-left:10px;padding-right:10px;padding-bottom:max(8px,env(safe-area-inset-bottom))}.tools button{padding:0 7px}.heading{margin:2px 0 5px}.heading h1{font-size:13px}.lesson.active{box-shadow:0 0 12px #4aa7ff22}.lesson{border-radius:7px}.view{border-radius:12px}.view{--visual-height:104px}main{gap:8px}.meters{padding:3px 6px;gap:4px;grid-template-columns:minmax(115px,1.55fr) minmax(53px,.8fr) minmax(38px,.55fr) minmax(42px,.6fr);min-height:94px}.meters .rpm-box{height:90px;padding-top:5px}.meters .rpm-line #rpm{font-size:24px}.rpm-line{margin-top:20px}.meters #rpmLabel{font-size:8px;top:38%}.rpm-prediction{font-size:8px;line-height:1.2;min-height:19px;margin-top:3px}.meters #speed{font-size:29px}.meters #gearValue{font-size:35px}.meters .meter-label{font-size:9px}.meters #gearNext{font-size:8px}.connection-box{padding-left:4px}.engine-feedback{height:52px;min-height:52px}.mechanism-labels{font-size:8px}.coach{height:76px;min-height:76px}.coach strong{font-size:12px}.coach p{font-size:10px;line-height:1.35}.coach-speech{border-radius:10px}.controls{padding-top:3px;gap:8px}.controls .clutch{height:142px;min-height:142px}.pedal-readout{font-size:10px}.control-title{margin-bottom:2px}.free-mode .controls{grid-template-columns:minmax(0,1fr) 124px minmax(0,1fr);gap:7px}.direct-gears{grid-template-rows:37px 29px 37px;gap:3px;margin-top:3px;margin-bottom:2px}.direct-gears button{font-size:18px;border-radius:7px;min-height:29px}.direct-gears .neutral-choice{width:40px;font-size:13px}.free-panel{height:76px}#raceTime{font-size:27px}.free-telemetry{font-size:9px;height:28px;margin-top:1px;gap:1px}.free-mode .control-title .assist-toggle{padding:1px 4px;font-size:9px}.free-mode .gas-label{display:none}.foot-actions{margin-top:4px}.foot-actions .brake,.foot-actions .park{min-height:46px}.foot-actions .brake small{font-size:9px}.free-mode .under-controls{display:none}.direct-gears button:focus-visible{outline-offset:0}
}
@media(max-width:760px) and (max-height:620px){
 .view{--visual-height:62px}.meters{min-height:80px}.meters .rpm-box{height:76px}.meters .rpm-line #rpm{font-size:21px}.meters #rpmLabel{top:32%;font-size:7px}.rpm-line{margin-top:14px}.rpm-prediction{font-size:8px}.meters #speed{font-size:25px}.meters #gearValue{font-size:30px}.controls .clutch{height:114px;min-height:114px}.coach{height:70px;min-height:70px}.instructor{height:64px}.engine-feedback{height:48px;min-height:48px}.direct-gears{grid-template-rows:32px 25px 32px;margin-top:0;gap:2px}.direct-gears button{min-height:25px;font-size:16px}.free-mode .control-title{min-height:24px}.free-telemetry{height:25px}.free-mode .foot-actions .brake,.free-mode .foot-actions .park{min-height:44px}
}
@media(max-width:360px){.app{padding-left:8px;padding-right:8px}.free-mode .controls{grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr);gap:5px}.meters{grid-template-columns:minmax(103px,1.45fr) minmax(47px,.75fr) minmax(34px,.5fr) minmax(38px,.6fr)}.control-title .pedal-word{font-size:10px}.free-mode .control-title strong{font-size:10px}.heading h1{font-size:12px}.heading .quiet{font-size:10px}.foot-actions .brake small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.tach-progress{transition:none}}
/* Compact navigation keeps utilities on the same row as the lesson tabs. */
@media(max-width:760px){header{height:0;border:0}nav{padding-top:4px;padding-bottom:4px;padding-right:124px}.free-mode .controls{grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr)}.meters .rpm-box .rpm-line{margin-top:23px}.meters .rpm-box #rpmLabel{top:28%}.meters .rpm-prediction{font-size:8px;margin-top:4px}.meters #rpmLabel{font-size:8px}.meters #speed{letter-spacing:-.03em}}
@media(max-width:760px) and (max-height:620px){.meters .rpm-box #rpmLabel{top:23%}.meters .rpm-box .rpm-line{margin-top:17px}}
/* Touch targets stay 44px; the quiet support rows give the space back. */
.free-mode .shifter-panel{position:relative}.free-mode .shifter-panel .control-title{position:relative;min-height:30px}.free-mode #shiftAssist{display:none}.free-mode .shifter-panel .control-title::before{content:'GEAR';font:9px ui-monospace,monospace;color:#8aafcf;letter-spacing:.1em;align-self:center}.free-mode .shifter-panel>.shift-button{display:block;position:absolute;top:0;min-height:30px;height:30px;width:34px;padding:0;font-size:0;z-index:2}.free-mode #shiftUp{right:0}.free-mode #shiftDown{left:0}.free-mode .shift-button span{font-size:13px}.free-mode .shift-button::after{display:none}.free-mode .direct-gears{grid-template-rows:44px 29px 44px}.free-mode .direct-gears button{min-height:29px}
@media(max-width:760px){.view{--visual-height:88px}.free-panel{height:68px;grid-template-rows:1fr 12px}.free-panel #raceState{font-size:8px;line-height:12px}.race-readout>div{height:25px;line-height:25px}.free-panel #raceTime{font-size:25px}.foot-actions .brake,.foot-actions .park,.hill .foot-actions .park{min-height:46px;height:46px}.free-mode .shifter-panel .control-title{min-height:26px}.free-mode .shifter-panel>.shift-button{height:26px;min-height:26px;width:29px}.free-mode .shift-button span{font-size:11px}.free-mode .direct-gears{grid-template-rows:44px 25px 44px;gap:3px}.free-mode .direct-gears button{min-height:25px}.free-mode .controls{padding-top:2px}.free-telemetry{height:22px}.free-panel .race-result small{font-size:8px}}
@media(max-width:760px) and (max-height:620px){.view{--visual-height:62px}.heading{min-height:24px;height:24px;margin:0 0 3px}.heading .quiet{min-height:24px;height:24px}.engine-feedback{height:44px;min-height:44px}.engine-feedback #viewButton,.engine-feedback .ignition{min-height:40px}.meters{min-height:76px}.meters .rpm-box{height:71px}.free-telemetry{height:20px}.foot-actions .brake,.foot-actions .park,.hill .foot-actions .park{height:44px;min-height:44px}.free-mode .direct-gears{margin:0;gap:2px}.free-mode .shifter-panel .control-title{min-height:24px}.free-mode .shift-status{font-size:9px;min-height:13px!important;line-height:13px}}
@media(min-width:761px) and (max-height:850px){header{height:60px}nav{padding-top:12px;padding-bottom:6px}.lesson{padding:10px 16px}.heading{margin:7px 0 12px}.heading h1{font-size:21px;margin:0}.mission-track{margin-top:6px}.meters .rpm-box{height:120px}.engine-feedback{min-height:72px}}

/* Three proportional free-mode pedals; standard training uses the light palette. */
body:not(.free-mode){color-scheme:light;--ink:#193754;--muted:#56728f;--paper:#e8f0f8;--line:#afc4da;background:radial-gradient(ellipse at top,#f5faff,#e5eef8 50%,#d2e1f0);color:var(--ink)}
body:not(.free-mode) header,body:not(.free-mode) footer{border-color:#bbcee0}body:not(.free-mode) .brand>b{color:#246aa8}body:not(.free-mode) .brand-copy small,body:not(.free-mode) .quiet,body:not(.free-mode) footer{color:#53728f}
body:not(.free-mode) .tools button,body:not(.free-mode) .lesson{background:#f6faff;color:#345a7e;border-color:#aec6de;box-shadow:0 2px 4px #2049690a}body:not(.free-mode) .lesson.active{background:linear-gradient(135deg,#3188c9,#1e6199);color:#fff;border-color:#1f70b0}
body:not(.free-mode) .view{border-color:#8faccc;box-shadow:0 10px 30px #294c7320}body:not(.free-mode) .scene-status{background:#e8f1fb;color:#345878}body:not(.free-mode) .meters{background:linear-gradient(145deg,#345e85,#204365);border-color:#608bb2}body:not(.free-mode) .meters>div{border-color:#6485a6}body:not(.free-mode) .meters .meter-label,body:not(.free-mode) .meters #rpmLabel,body:not(.free-mode) .rpm-line small,body:not(.free-mode) .meters #speed small,body:not(.free-mode) .meters #gearNext{color:#c0d4e9}body:not(.free-mode) .tach-track{stroke:#547592}body:not(.free-mode) .tach-dial text{fill:#c2d6ea}body:not(.free-mode) .tach-ticks path{stroke:#9ab8d3}
body:not(.free-mode) .engine-feedback{background:#dce9f6;border-color:#b4cadf}body:not(.free-mode) .mechanism-labels{color:#355f85}body:not(.free-mode) .engine-feedback #viewButton{background:#f7fbff;color:#295a84;border-color:#aac3dc}body:not(.free-mode) .engine-feedback .ignition{background:#fff4e6;border:2px solid #f39535;outline:1px solid #efad62;outline-offset:1px;box-shadow:0 0 12px #f6a34425;color:#684324}body:not(.free-mode) .key-caption small{color:#865e34}body:not(.free-mode) .key-caption b{color:#79451c}

.free-mode .controls{grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr) minmax(0,.85fr);gap:10px}
.brake-panel[hidden]{display:none}.free-mode .brake-panel{display:flex;flex-direction:column;min-width:0}.free-mode .controls .control-title{height:36px;min-height:36px;align-items:center;margin:0 0 4px;color:#d0e3f8}.free-mode .control-title strong{font-size:12px;line-height:1.3}.free-mode .control-title .pedal-word{display:block;font-size:10px;font-weight:500;letter-spacing:.03em}.free-mode .clutch-panel .control-title>span,.free-mode .brake-panel .control-title>span,.free-mode #gasAssist{display:none}
body:not(.free-mode) .controls .clutch{background:linear-gradient(110deg,#d9e4ef,#f3f7fb 52%,#d7e3ef);border-color:#afc1d3;box-shadow:inset 0 2px 6px #28476412,inset 0 1px #fff}body:not(.free-mode) .controls .clutch .rail{background:#b6c9dc;box-shadow:none}body:not(.free-mode) .clutch .end-label{color:#476481;font-size:10px}body:not(.free-mode) .controls .clutch .pedal-pad{border-color:#8495a6;background:repeating-linear-gradient(0deg,transparent 0 6px,#192f4666 6px 8px),linear-gradient(135deg,#8295a8,#415a72);box-shadow:0 5px 0 #20374d,0 7px 8px #25456233,inset 0 1px 1px #fff8}body:not(.free-mode) .controls .accelerator .pedal-pad{background:repeating-linear-gradient(90deg,transparent 0 7px,#182d4366 7px 9px),linear-gradient(135deg,#8295a8,#415a72);border-radius:10px}
.free-mode .controls .clutch-knob{width:64px;max-width:calc(100% - 14px);height:41px}.free-mode .controls .brake-pedal .clutch-knob{width:62px;height:39px}.free-mode .controls .brake-pedal .pedal-pad{border-radius:8px 8px 11px 11px}.free-mode .controls .accelerator .clutch-knob{width:37px;height:64px}.free-mode .brake-pedal .pedal-foot{transform:translate(-50%,-50%) scaleX(-1) rotate(-5deg)}
.free-mode .controls .pedal-foot{display:none}.free-mode .pedal-readout span{display:block;font-size:9px}.free-mode .control-note{font-size:10px;text-align:center}
body:not(.free-mode) .foot-actions .park{background:#f4f9ff;color:#305c80;border-color:#b1c7dc}body:not(.free-mode) .foot-actions .park small{color:#587894}.free-mode .foot-actions #brake{display:none}
.free-mode :focus-visible{outline:2px solid #287cbb;outline-offset:2px}.free-mode .engine-feedback .ignition:focus-visible{outline-color:#f39535}
@media(max-width:760px){
 .free-mode .controls{grid-template-columns:minmax(0,1fr) 138px minmax(0,1fr) minmax(0,.85fr);gap:5px}.free-mode .controls .control-title{height:30px;min-height:30px;margin-bottom:3px}.free-mode .control-title strong{font-size:10px}.free-mode .control-title .pedal-word{font-size:9px}.free-mode .controls .clutch-knob{height:33px}.free-mode .controls .brake-pedal .clutch-knob{height:31px}.free-mode .controls .accelerator .clutch-knob{width:31px;height:53px}.free-mode .controls .end-label{font-size:8px}.free-mode .pedal-readout{font-size:11px;line-height:1.2;min-height:26px;margin-top:5px}.free-mode .control-note{display:none}.free-mode .free-telemetry{font-size:9px}.free-mode .shifter-panel>.shift-button{top:2px}.free-mode .foot-actions{margin-top:5px}
}
@media(max-width:360px){.free-mode .controls{gap:4px}.free-mode .controls .accelerator .clutch-knob{width:28px;height:49px}.free-mode .controls .end-label{font-size:7px}.free-mode .controls .clutch-knob{max-width:calc(100% - 10px)}.free-mode .control-title strong{font-size:9px}}

@media(max-width:760px){.free-mode .view{--visual-height:76px}.free-mode .free-panel{height:64px}.free-mode .controls{grid-template-columns:minmax(44px,1fr) 138px minmax(44px,1fr) minmax(44px,.85fr)}.free-mode .controls .control-title{height:29px;min-height:29px}.free-mode #clutchState{font-size:10px;white-space:nowrap}}
@media(max-width:760px) and (max-height:620px){.free-mode .view{--visual-height:48px}}
/* Standard training is light; free driving keeps the dark instrument palette. */
:root{color-scheme:light;--ink:#193754;--muted:#56728f;--paper:#e8f0f8;--line:#afc4da}
body.free-mode{color-scheme:dark;--ink:#e6eefb;--muted:#90a4bf;--paper:#09121f;--line:#263a53;color:var(--ink)}
body:not(.free-mode){--blue:#246fae;--green:var(--blue);--lime:#d9e9fb}
body:not(.free-mode) .view{background:#f6faff}body:not(.free-mode) .mission-track li{background:#e4edf7;color:#597895}body:not(.free-mode) .mission-track li.current{background:#cfe5fa;color:#205b8d}body:not(.free-mode) .mission-track li.done{color:#286d9f}
body:not(.free-mode) .coach-speech{background:linear-gradient(145deg,#fff,#edf5fd);border-color:#b7cee2;box-shadow:0 3px 10px #2d5e8910}body:not(.free-mode) .coach-speech::before{background:#f5faff;border-color:#b7cee2}body:not(.free-mode) .coach strong{color:#224d71}body:not(.free-mode) .coach p,body:not(.free-mode) .instructor-name{color:#4c6f8d}body:not(.free-mode) .action-cue{background:#fff0d9;color:#8c5318;border-color:#d49a50}body:not(.free-mode) .coach.wear-warning .coach-speech{background:#fff0d9}body:not(.free-mode) .coach.low-rpm-warning strong,body:not(.free-mode) .coach.wear-warning strong{color:#8c5318}body:not(.free-mode) .coach.low-rpm-critical strong{color:#a4412e}
body:not(.free-mode) .control-title{color:#234c6f}body:not(.free-mode) .control-title>span{color:#587894}body:not(.free-mode) .pedal-readout{color:#285777}body:not(.free-mode) .control-note,body:not(.free-mode) .control-keys,body:not(.free-mode) .gas-label{color:#506e89}body:not(.free-mode) .assist-toggle{background:#e8f2fd;color:#356c98;border-color:#9dbbd5}body:not(.free-mode) .assist-toggle[aria-pressed=true]{background:#c9e3fa;color:#20547f}body:not(.free-mode) .shift-button{background:linear-gradient(#edf7ff,#cbdff1)!important;color:#285b83!important;border-color:#9dbbd5!important}body:not(.free-mode) .shift-status{color:#3e6383}body:not(.free-mode) .foot-actions .brake{background:linear-gradient(#f7faff,#d7e5f3);color:#31516f;border-color:#a7bcd0}body:not(.free-mode) .foot-actions .brake small{color:#58718a}body:not(.free-mode) .foot-actions .brake.pressed{background:#f1caa7;border-color:#ba7547}body:not(.free-mode) .under-controls,body:not(.free-mode) .shortcut-strip,body:not(.free-mode) footer button{color:#577994}body:not(.free-mode) .shortcut-strip button{color:#326a9b}body:not(.free-mode) kbd,body:not(.free-mode) .key-tip{background:#eaf3fb!important;color:#476a8a!important;border-color:#b5cadd!important}
body:not(.free-mode) dialog{color:#193754;background:radial-gradient(ellipse at top left,#fff,#edf5fd 75%);border-color:#a9c5dd;box-shadow:0 25px 90px #1d426b35}body:not(.free-mode) dialog p,body:not(.free-mode) dialog li,body:not(.free-mode) .modal-foot{color:#466a8b}body:not(.free-mode) dialog .eyebrow{color:#4275a1}body:not(.free-mode) dialog .note{background:#e1eefb;color:#3b6386;border-color:#b3cee6}body:not(.free-mode) .intro-steps{color:#305b80;border-color:#b4cee6}body:not(.free-mode) .intro-steps b{color:#246fae}body:not(.free-mode) .text-button{color:#326d9e}
/* Keep the key readable in OFF/START/ON/stalled and disabled states. */
.free-mode .engine-feedback .ignition{background:#28384d;border:2px solid #f5a44b;outline:1px solid #d98735;outline-offset:1px;box-shadow:0 0 12px #f6a34420;color:#ffe1b5;opacity:1}
.free-mode .engine-feedback .ignition .key-caption small{color:#f5c997;opacity:1}.free-mode .engine-feedback .ignition .key-caption b{color:#fff0da;opacity:1}.free-mode .engine-feedback .ignition:disabled{opacity:1;-webkit-text-fill-color:currentColor}
/* Only the free-driving viewport captures a drag; pedal gestures are separate. */
.free-mode #truckPanel{touch-action:none;user-select:none;cursor:grab}.free-mode #truckPanel.camera-dragging{cursor:grabbing}.orbit-hint[hidden]{display:none}.orbit-hint{position:absolute;top:6px;left:8px;z-index:4;padding:2px 5px;border:1px solid #81b2dc55;border-radius:4px;background:#102338d9;color:#d8e9ff;font-size:8px;line-height:1.4;pointer-events:none}.free-mode #truckPanel .scene-tags{display:none}.free-mode #truckPanel .scene-status{cursor:default}
@media(max-width:760px){.orbit-hint{font-size:7px;top:4px;left:6px}}
/* Payload is chosen before a run. Keep the three choices beside the live mass. */
.load-picker[hidden]{display:none}.load-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;padding:4px 8px;border:1px solid #365a7c;border-radius:9px;background:#102a43;color:#c8dff4}
.load-info{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}.load-buttons{display:flex;gap:3px}.load-buttons button{min-height:34px;padding:2px 9px;border:1px solid #53799b;border-radius:7px;background:#1d3b5a;color:#deecfa;font-size:11px;font-weight:700;touch-action:manipulation}.load-buttons button[aria-pressed="true"]{background:#2b8bc8;border-color:#9cdbff;color:#fff;box-shadow:0 0 12px #61bcff50}.load-buttons button:disabled{opacity:.45}.load-buttons button:focus-visible,.load-records summary:focus-visible{outline:2px solid #ffa441;outline-offset:2px}
.load-records{grid-column:1/-1;font-size:10px;color:#9fc7e6}.load-records summary{cursor:pointer;list-style:revert}.load-records span{display:block;margin:2px 0 2px 12px;font-variant-numeric:tabular-nums}
@media(max-width:760px){.load-picker{gap:0 4px;padding:2px 5px}.load-info{font-size:9px}.load-buttons button{min-height:30px;padding:2px 5px;font-size:10px}.load-records{font-size:9px}}
@media(max-width:360px){.load-info{font-size:8px}.load-buttons button{padding:2px 4px;font-size:9px}}
/* Keep the handbrake within the usual 375×667 phone viewport. */
.load-picker{display:flex;flex-wrap:wrap;justify-content:space-between;min-height:36px;gap:2px;padding:2px 6px}.load-info{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.load-records{grid-column:auto;align-self:center}.load-records[open]{flex-basis:100%}.load-buttons button{min-height:30px}
@media(max-width:760px){.free-mode .view{--visual-height:62px}.free-mode .meters{min-height:80px}.free-mode .meters .rpm-box{height:77px}.free-mode .controls .clutch{height:128px;min-height:128px}.free-mode .load-picker{padding:2px 4px}.free-mode .load-records{font-size:9px}}
@media(max-width:760px) and (max-height:620px){.free-mode .view{--visual-height:48px}.free-mode .controls .clutch{height:112px;min-height:112px}}
/* Keep the version below reset text; the heading retains its existing height. */
.heading-actions{position:relative;flex:none}.heading-actions #reset{padding-bottom:13px}.app-version{position:absolute;right:20px;bottom:3px;pointer-events:none;white-space:nowrap;color:#8ca8c5;font:700 10px/1 ui-monospace,monospace;letter-spacing:.02em}
@media(max-width:760px){.heading-actions #reset{padding-bottom:9px}.app-version{right:14px;bottom:1px;font-size:8px}.free-mode #raceBest{overflow:hidden;text-overflow:ellipsis}.load-records[open]{min-width:0;width:100%}.load-records span{overflow-wrap:anywhere}}
@media(max-width:760px) and (max-height:620px){.heading-actions #reset{line-height:1;padding-bottom:11px}}
body:not(.free-mode) .app-version{color:#4c7293}
/* Fit status and goal speed within the existing result panel height. */
.free-mode .free-panel{grid-template-rows:minmax(0,1fr) 18px}.free-mode .race-label{line-height:12px}.free-mode .race-readout>div{height:36px;line-height:36px}.free-mode #raceTime{font-size:30px}.free-mode #raceProgress{margin:2px 0}.free-mode #raceState{line-height:18px}
@media(max-width:760px){.free-mode .free-panel{grid-template-rows:minmax(0,1fr) 10px}.free-mode .race-label{line-height:10px}.free-mode .race-readout>div{height:20px;line-height:20px}.free-mode #raceTime{font-size:22px}.free-mode #raceDistance{margin-top:5px}.free-mode #raceProgress{margin:1px 0}.free-mode #raceState{line-height:10px}.free-mode .race-result{align-self:stretch;display:flex;min-height:0;flex-direction:column;justify-content:flex-start}.free-mode .race-share{min-height:34px;padding:2px 4px}.free-mode .race-result small{line-height:10px;min-height:10px}}