:root{color-scheme:dark;--bg:#111315;--panel:#191c1f;--line:#33373b;--text:#ece9e3;--muted:#999d9f;--accent:#ffad66;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}main{max-width:1300px;margin:auto;padding:30px 42px 0}button,input,a,summary{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.4}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--line)}.brand{color:inherit;text-decoration:none;display:flex;gap:17px;align-items:center;font-size:13px;font-weight:700;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:1.7px;color:var(--muted);margin-top:6px}.brand-mark{font-size:27px;letter-spacing:-2px}.brand-mark span{color:var(--accent);font-weight:400}.edition{font-size:10px;letter-spacing:2px;color:var(--muted)}.edition span{margin-left:10px;color:var(--accent)}.intro{display:flex;justify-content:space-between;align-items:end;padding:35px 0 27px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);margin:0 0 10px}h1{font-size:36px;font-weight:500;letter-spacing:-1.2px;margin:0}.intro>p{color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 2px}.studio{display:grid;grid-template-columns:1.12fr 1fr;gap:22px}.cockpit{background:radial-gradient(ellipse at 50% 40%,#25292c 0,#191c1f 62%);border:1px solid var(--line);border-radius:14px;padding:25px 27px 20px;overflow:hidden}.cockpit-top{display:flex;align-items:center;justify-content:space-between}.cockpit h2{margin:0;font-size:24px;font-weight:500;letter-spacing:-.4px}.cockpit .eyebrow{color:var(--muted);font-size:10px;letter-spacing:1px}.sound-state{font-size:10px;letter-spacing:1px;border:1px solid #4a4e50;padding:7px 11px;border-radius:5px}.sound-state.live{color:var(--accent);border-color:var(--accent)}.dial{width:min(100%,390px);margin:6px auto -5px;position:relative;color:var(--accent)}.dial-face{width:100%;display:block;overflow:visible}.dial-track{fill:none;stroke:#383d40;stroke-width:6;stroke-linecap:round}.dial-progress{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;stroke-dasharray:0 100;opacity:.8}.dial-labels{font-size:15px;fill:#8e9397;font-family:monospace;text-anchor:middle}.rpm-readout{position:absolute;bottom:8%;left:0;right:0;text-align:center;pointer-events:none}.rpm-readout>span{font-size:44px;font-weight:300;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:-1px}.rpm-readout small{display:block;color:var(--muted);font-size:9px;letter-spacing:1.4px;margin-top:3px}.telemetry{display:grid;grid-template-columns:1fr 1fr 1fr;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:17px 0;margin:6px 0 20px}.telemetry div+div{border-left:1px solid var(--line)}.telemetry span{display:block;font-size:27px;font-variant-numeric:tabular-nums}.telemetry small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.main-controls{display:flex;gap:10px}.main-controls button{min-height:52px;border-radius:7px;font-size:14px;font-weight:700}.primary{background:var(--accent);color:#151617;border:0;flex:1}.stop{background:transparent;color:var(--text);border:1px solid #656a6d;padding:0 20px}.status{font-size:11px;line-height:1.5;color:var(--muted);min-height:32px;margin:13px 0 0}.settings{display:flex;flex-direction:column;gap:20px}.section-label{display:flex;justify-content:space-between;align-items:center;margin:3px 0 13px}.section-label h2{font-size:10px;font-weight:500;letter-spacing:1.7px;margin:0}.section-label>span{font-size:9px;letter-spacing:1px;color:var(--muted)}.cars{display:grid;gap:8px}.car{display:flex;align-items:center;gap:16px;width:100%;min-height:77px;background:#191c1f;border:1px solid var(--line);border-radius:8px;color:var(--text);text-align:left;padding:13px 17px;transition:background .2s,border-color .2s}.car:hover{background:#23262a}.car.selected{border-color:var(--accent);background:#232322}.car-number{font-family:monospace;font-size:12px;color:var(--muted)}.selected .car-number{color:var(--accent)}.car strong{display:block;font-size:15px;font-weight:500}.car small{display:block;font-size:10px;color:var(--muted);margin-top:6px}.car-tag{margin-left:auto;border:1px solid #42464a;border-radius:4px;font-family:monospace;font-size:11px;padding:6px 8px;min-width:42px;text-align:center}.car.selected .car-tag{color:var(--accent);border-color:#63503e}.control-panel{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:8px}.control-panel .section-label{margin-top:0}.mode-switch{display:flex;background:#111315;padding:4px;border-radius:6px;gap:4px}.mode-switch button{flex:1;min-height:38px;color:var(--muted);border:0;border-radius:4px;background:transparent;font-size:12px}.mode-switch .selected{background:#3a3e41;color:var(--text)}#mode-help{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 15px}.volume-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:9px}.volume-label output{color:var(--accent);font-family:monospace}input[type=range]{width:100%;height:22px;accent-color:var(--accent);cursor:pointer}.throttle{width:100%;padding:15px;color:var(--accent);background:#292522;border:1px solid var(--accent);border-radius:6px;font-size:12px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none}.throttle:active,.throttle.pressed{background:var(--accent);color:#111315}.throttle small{display:block;font-size:9px;font-weight:400;margin-top:5px}.demo-note{color:var(--muted);font-size:10px;margin:8px 0 16px}.connection{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 3px;border-bottom:1px solid var(--line)}.connection>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.connection strong{font-size:11px;font-weight:400}.connection #gps-detail{color:var(--muted);font-size:10px}.connection-dot{height:6px;width:6px;background:#707678;border-radius:50%}.connection-dot.ok{background:#7ad7ce}.connection-dot.error{background:#ff7575}.connection button{font-size:11px;color:var(--text);padding:10px 15px;border:1px solid var(--line);border-radius:5px;background:transparent;white-space:nowrap}.guide{color:var(--muted);font-size:11px;line-height:1.7;padding:17px 3px}.guide summary{cursor:pointer;color:#c3c5c5;min-height:24px}.guide-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding-top:10px}.guide h3{color:var(--text);font-size:12px;font-weight:400;margin-bottom:5px}.guide p{margin-top:0}.guide-foot{padding-top:12px;border-top:1px solid var(--line)}footer{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1.6px;color:#71777b;padding:20px 0;border-top:1px solid var(--line)}[hidden]{display:none!important}
@media(min-width:1500px){main{padding-top:45px}.intro{padding:42px 0 35px}}
@media(max-width:760px){main{padding:22px 20px 0}.edition{display:none}.intro{display:block;padding:28px 0 24px}h1{font-size:30px}.intro>p{margin-top:12px;font-size:12px}.intro>p br{display:none}.studio{grid-template-columns:1fr;gap:24px}.cockpit{padding:22px}.dial{max-width:330px}.settings{gap:22px}.connection>div{gap:8px}.connection #gps-detail{width:100%;padding-left:14px}.guide-grid{grid-template-columns:1fr;gap:0}footer span:nth-child(2){display:none}.car{min-height:74px}.telemetry{padding:16px 0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}