/* Open studio: controls remain HTML, the car is the focal point. */
html,body,#hero{background:#f4f7fa;color:#2a3a4d}.scene-heading{display:none}.view-tools{top:28px;right:24px;flex-direction:row;gap:7px}.view-tools button{border:1px solid #2a3a4d25;background:#ffffffd9;color:#2a3a4d;width:38px;height:38px;font-size:19px;border-radius:50%}.view-tools button:hover{background:#e4edf3}#pause-scene{top:30px;right:auto;left:23px;border:0;background:transparent;color:#34475a;padding:8px 0;font-size:10px;text-decoration:underline;text-underline-offset:4px}#controls{left:24px;right:24px;bottom:21px}#rail{background:#fff;border:1px solid #2a3a4d25;box-shadow:0 4px 18px #2a3a4d0c;padding:5px;gap:3px;border-radius:10px}#rail button{color:#34475a;padding:14px 24px;min-width:108px;font-size:12px;border-radius:6px}#rail button small{color:#6b7b8c}#rail button.active{background:#1f6fa2;color:#fff}#rail button.active small{color:#fff}#rail button:hover{background:#e8f0f6;color:#2a3a4d}#rail button.active:hover{background:#1f6fa2;color:#fff}#modecap{color:#34475a;margin-top:14px;font-size:10px}#stick{background:#fff;border-color:#2a3a4d30;color:#34475a}#knob{background:#1f6fa2}.telemetry{top:94px;left:25px}.telemetry>span,.telemetry small{color:#34475a}.telemetry strong{font-size:34px;color:#2a3a4d}.drive-pad button{background:#fff;color:#2a3a4d;border-color:#2a3a4d40}.drive-pad .accelerator{background:#1f6fa2;color:#fff;border-color:#1f6fa2}.drive-pad button.held{background:#2a3a4d;color:#fff}#loader{background:#f4f7fa;color:#2a3a4d}#lp{color:#34475a}#fallback{background:#f4f7fa;color:#2a3a4d}@media(max-width:600px){.view-tools{right:15px;top:18px;gap:5px}.view-tools button{width:34px;height:34px}#pause-scene{left:17px;top:20px;font-size:9px}#controls{left:13px;right:13px;bottom:18px}#rail button{padding:11px 8px;min-width:0;font-size:11px;min-height:44px}.telemetry{top:76px;left:20px}.drive-pad{bottom:131px}#modecap{font-size:9px}}

/* Identity loader stays a black object, as supplied in the brand revision. */
#loader{background:repeating-linear-gradient(90deg,#0a0a0a 0 14px,#1a1a1a 14px 28px);color:#fff}#lp{color:#fff}

/* Instructions and telemetry remain legible as the branded mat moves underneath. */
#modecap{color:#fff;background:#233c51ed;border:1px solid #ffffff20;border-radius:6px;padding:7px 12px;width:fit-content;max-width:100%;margin:10px auto 0;line-height:1.5}
.telemetry{background:#fffffff0;border:1px solid #2a3a4d20;border-radius:9px;padding:10px 13px;box-shadow:0 4px 16px #172b3f0a}

/* A compact toolbar and one mode selector leave room to see the car turn. */
.view-tools{top:18px;right:18px;gap:6px}.view-tools button{width:44px;height:44px;border-radius:8px;font-size:21px;background:#ffffffed}
#pause-scene{top:19px;left:20px;min-height:44px;font-size:10px;padding-inline:8px;background:#ffffffed;border-radius:6px;text-underline-offset:3px}
#controls{bottom:18px}#rail{box-shadow:none;border:1.5px solid #137fbf55;border-radius:8px}#rail button{min-height:46px}
#modecap{font-size:10px;margin-top:9px}.telemetry{top:78px;padding:8px 12px}.telemetry strong{font-size:26px}.telemetry>span{font-size:7px}
#stick,body[data-scene-mode=drive] #stick{display:none}
.drive-pad{gap:8px}.drive-pad button{min-width:44px}
@media(max-width:600px){.view-tools{right:12px;top:14px;gap:4px}.view-tools button{width:40px;height:44px}#pause-scene{top:14px;left:12px;font-size:9px;padding:6px}.drive-pad{left:12px;right:12px;bottom:133px}.drive-pad button{min-width:42px;padding:0 8px}.drive-pad>div{gap:5px}.telemetry{top:74px;left:14px}#modecap{font-size:9px}#rail button{padding:10px 12px}}
@media(max-width:340px){.drive-pad button{min-width:44px;font-size:10px;padding:0 5px}.drive-pad>div{gap:4px}.drive-pad{left:10px;right:10px;gap:5px}.view-tools{gap:3px;right:10px}.view-tools button{width:36px}#pause-scene{left:10px;font-size:8px}}

/* Keep analogue steering available on desktop and touch without crowding the mode rail. */
body[data-scene-mode=drive] #stick{display:block;position:absolute;left:0;bottom:112px;width:88px;height:88px;box-shadow:0 3px 12px #17324c18;z-index:3;cursor:grab}
body[data-scene-mode=drive] #stick:active{cursor:grabbing}
body[data-scene-mode=drive] .drive-pad{display:flex;justify-content:flex-end;bottom:145px}
.drive-pad>div:first-child{display:none}
@media(max-width:600px){body[data-scene-mode=drive] #stick{bottom:116px;width:80px;height:80px}body[data-scene-mode=drive] .drive-pad{bottom:149px}}
html,body,#hero{background:transparent}

#pause-scene{top:66px;left:18px;padding:7px 10px;background:#2a3a4ddc;color:#fff;border:0;border-radius:7px;text-decoration:none;z-index:4}
@media(max-width:600px){#pause-scene{top:58px;left:10px}}

/* A single clear control system; the joystick is the entry into Race from every mode. */
.view-tools{top:18px;right:18px;gap:7px;z-index:4}
.view-tools button{display:grid;place-items:center;width:42px;height:42px;padding:0;background:#2a3a4deb;border:1.5px solid #ffffff80;border-radius:9px;color:#fff;box-shadow:none;transition:background .15s,border-color .15s,transform .15s}
.view-tools button svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.view-tools button:hover{background:#f2b257;color:#fff;border-color:#f2b257}.view-tools button:active{transform:scale(.96)}
#pause-scene{top:67px;left:18px;min-height:30px;height:30px;background:#2a3a4deb;border:1px solid #ffffff80;border-radius:7px;padding:0 10px;color:#fff;font-size:10px;font-weight:800;text-decoration:none}
#pause-scene:hover{background:#f2b257;border-color:#f2b257}
.telemetry{top:106px;left:18px;background:#2a3a4deb;border:1px solid #ffffff80;box-shadow:none;color:#fff;min-width:86px;padding:6px 10px}
.telemetry>span,.telemetry small,.telemetry strong{color:#fff}.telemetry strong{font-size:24px}.telemetry small{font-size:8px}
#controls{bottom:17px;left:18px;right:18px}
#rail{padding:5px;background:#2a3a4df0;border:1.5px solid #ffffffa6;border-radius:10px;box-shadow:none;gap:3px}
#rail button{background:transparent;color:#fff;border-radius:7px;min-height:48px;min-width:100px;padding:10px 17px;font-size:12px;font-weight:800;transition:background .15s,color .15s}
#rail button small{color:#ffffffbb}
#rail button:hover{background:#ffffff22;color:#fff}
#rail button.active,#rail button.active:hover{background:#f2b257;color:#fff}
#rail button.active small{color:#fff}
#modecap{color:#fff;background:#2a3a4deb;border:1px solid #ffffff80;border-radius:7px;padding:7px 10px;font-size:10px;line-height:1.4;max-width:min(100%,510px);margin:9px auto 0}
body #stick,body[data-scene-mode] #stick{display:block;position:absolute;left:0;bottom:106px;width:92px;height:92px;background:#2a3a4df0;border:2px solid #f2b257;border-radius:50%;box-shadow:0 0 0 5px #2a3a4d47;color:#fff;z-index:3;cursor:grab;touch-action:none;transition:background .15s,border-color .15s}
body #stick:hover,body #stick:active{background:#34475a;cursor:grabbing}
#stick::after{content:'DRAG TO RACE';position:absolute;top:-27px;left:-15px;width:120px;text-align:center;color:#fff;font-size:9px;font-weight:900;letter-spacing:.08em;text-shadow:0 1px 4px #17324c}
body[data-scene-mode=drive] #stick::after{content:'JOYSTICK'}
#stick .sdir{font-size:13px;font-weight:900;line-height:1;color:#fff}
#knob{width:28px;height:28px;margin:-14px;background:#f2b257;border:3px solid #fff;box-shadow:0 2px 7px #0003}
body[data-scene-mode=drive] .drive-pad{display:flex;justify-content:flex-end;bottom:138px;left:120px;right:0}
.drive-pad>div:first-child{display:none}
.drive-pad>div:last-child{gap:7px}
.drive-pad button{height:43px;min-width:70px;border:1.5px solid #fff;border-radius:8px;background:#2a3a4deb;color:#fff;padding:0 12px;font-size:11px;font-weight:800;box-shadow:none}
.drive-pad button:hover{background:#34475a}.drive-pad button.held{background:#137fbf;color:#fff;border-color:#fff}
.drive-pad .accelerator{background:#f2b257;color:#fff;border-color:#f2b257}.drive-pad .accelerator:hover{background:#e5a446}
@media(max-width:600px){.view-tools{top:13px;right:10px;gap:5px}.view-tools button{width:38px;height:38px}.view-tools button svg{width:19px;height:19px}#pause-scene{top:59px;left:10px;height:28px;min-height:28px;font-size:9px}.telemetry{top:96px;left:10px;padding:5px 8px}.telemetry strong{font-size:22px}#controls{left:10px;right:10px;bottom:12px}#rail{width:100%}#rail button{min-width:0;min-height:44px;padding:8px 5px;font-size:10px}#modecap{max-width:100%;font-size:9px}body #stick,body[data-scene-mode] #stick{left:3px;bottom:111px;width:76px;height:76px}#stick::after{top:-24px;left:-23px}.drive-pad button{min-width:54px;height:39px;padding:0 8px;font-size:10px}body[data-scene-mode=drive] .drive-pad{left:89px;right:0;bottom:130px}.drive-pad>div:last-child{gap:4px}}
@media(max-width:340px){.drive-pad button{min-width:49px;padding:0 6px}body[data-scene-mode=drive] .drive-pad{left:86px}.view-tools button{width:35px;height:37px}}
@media(prefers-reduced-motion:reduce){.view-tools button,#rail button,body #stick{transition:none}}

/* Match the site's clearer action system without reducing driving hit targets. */
:root{--scene-action:#b8540d;--scene-action-hover:#97420b}
.view-tools button{min-width:44px;min-height:44px;background:#263b50ef;border-color:#ffffffb3;box-shadow:0 3px 10px #0e2f4a29}
.view-tools button:hover{background:var(--scene-action);border-color:var(--scene-action);color:#fff}
.view-tools button:focus-visible,#pause-scene:focus-visible,#rail button:focus-visible,.drive-pad button:focus-visible,body #stick:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #263b50}
#pause-scene{min-height:38px;height:38px;padding:0 12px;border-color:#ffffffb3;background:#263b50ef;box-shadow:0 3px 10px #0e2f4a29}
#pause-scene:hover{background:var(--scene-action);border-color:var(--scene-action)}
#rail{background:#263b50f2;border-color:#ffffffbd;box-shadow:0 7px 20px #0e2f4a36}
#rail button{min-height:48px;border-radius:8px}
#rail button:hover{background:#ffffff30}
#rail button.active,#rail button.active:hover{background:var(--scene-action);color:#fff}
.drive-pad button{min-height:44px;background:#263b50f2;border-color:#ffffffbd;box-shadow:0 3px 10px #0e2f4a29}
.drive-pad button:hover{background:#36546d}
.drive-pad .accelerator,.drive-pad .accelerator:hover{background:var(--scene-action);border-color:var(--scene-action);color:#fff}
.drive-pad .accelerator:hover{background:var(--scene-action-hover);border-color:var(--scene-action-hover)}
@media(max-width:600px){.view-tools button{width:44px;height:44px}.view-tools button svg{width:19px;height:19px}#pause-scene{top:62px;min-height:38px;height:38px}#rail button{min-height:48px}.drive-pad button{min-height:44px}}
@media(max-width:340px){.view-tools button{width:42px;min-width:42px}.view-tools{gap:3px}}

/* Keep the joystick's active accents aligned with the site's readable orange. */
body #stick,body[data-scene-mode] #stick{border-color:var(--scene-action)}
#knob{background:var(--scene-action)}

/* Match the supplied September orange across the website and car controls. */
:root{--scene-action:#f2b257;--scene-action-hover:#e19a3b}
body[data-scene-mode=intro] #stick::after,body[data-scene-mode=kit] #stick::after,body[data-scene-mode=studio] #stick::after{content:'DRAG TO ORBIT'}