:root{--bg:#0b0e12;--glass:#10131894;--glass-strong:#0e1115c7;--stroke:#ffffff14;--stroke-hi:#ffffff29;--text:#eef1f4;--muted:#8b95a1;--accent:#4de2ff;--ok:#58f0a0;--bad:#ff4d5e;--amber:#ffc34d;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1, "cv11" 1;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;margin:0}button{font:inherit;color:inherit}.app{height:100dvh;position:relative;overflow:hidden}#scene{cursor:grab;touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}#scene:active{cursor:grabbing}.vignette{pointer-events:none;background:radial-gradient(120% 80% at 50% 45%,#0000 55%,#0000008c 100%),linear-gradient(#0b0e12b3,#0000 18% 70%,#0b0e12d9);position:absolute;inset:0}.hud{z-index:2;position:absolute}.card,.segmented,.chip,.dock{background:var(--glass);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(20px)saturate(150%);box-shadow:inset 0 1px #ffffff0d,0 20px 50px -20px #000000b3}.top{pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 26px;display:flex;top:0;left:0;right:0}.top>*{pointer-events:auto}.eyebrow{letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 6px;font-size:11px;font-weight:600}h1{letter-spacing:-.025em;text-shadow:0 2px 20px #0009;margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:600}.toolbar{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.segmented{border-radius:12px;padding:3px;display:inline-flex}.segmented button{height:34px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:9px;padding:0 14px;font-size:13px;font-weight:500;transition:background .15s,color .15s}.segmented button:hover{color:var(--text)}.segmented button.active{color:var(--text);background:#ffffff1f;box-shadow:inset 0 1px #ffffff14}.chip{cursor:pointer;border-radius:12px;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:13px;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex}.chip:hover{border-color:var(--stroke-hi)}.chip .led{background:#3a434d;border-radius:50%;width:7px;height:7px;transition:background .2s,box-shadow .2s}.chip.on .led{background:var(--accent);box-shadow:0 0 10px var(--accent)}.chip.danger[aria-pressed=true]{color:#ffd6da;background:#3c0e1499;border-color:#ff4d5e8c}.chip.danger[aria-pressed=true] .led{background:var(--bad);box-shadow:0 0 10px var(--bad);animation:.6s infinite blink}button:focus-visible,canvas:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.card{border-radius:20px;width:260px;padding:18px 20px;top:50%;transform:translateY(-58%)}.vehicle{left:26px}.system{width:290px;right:26px}.gear{color:#4b5561;gap:14px;font-size:14px;font-weight:600;display:flex}.gear .on{color:var(--text)}.speed{align-items:baseline;gap:8px;margin:6px 0 14px;display:flex}.speed span{letter-spacing:-.04em;font-size:76px;font-weight:300;line-height:1}.speed small{color:var(--muted);font-size:14px;font-weight:500}.rows{border-top:1px solid var(--stroke);gap:2px;padding-top:10px;display:grid}.row{justify-content:space-between;padding:5px 0;font-size:13px;display:flex}.row span{color:var(--muted)}.row b{font-weight:600}.card-title{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 12px;font-size:11px;font-weight:600}.status{gap:2px;margin:0;padding:0;list-style:none;display:grid}.status li{border-bottom:1px solid #ffffff0a;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:7px 0;font-size:13px;display:grid}.status em{font-size:12.5px;font-style:normal;font-weight:600}.status li.fault em{color:var(--bad)}.led{border-radius:50%;width:8px;height:8px}.led.ok{background:var(--ok);box-shadow:0 0 8px #58f0a0b3}.led.idle{background:#2f7f8f;box-shadow:0 0 6px #4de2ff4d}.led.bad{background:var(--bad);box-shadow:0 0 10px var(--bad);animation:.6s infinite blink}@keyframes blink{50%{opacity:.25}}.meter{margin-top:14px}.meter-head{color:var(--muted);justify-content:space-between;margin-bottom:8px;font-size:12px;display:flex}.meter-head span:last-child{color:var(--amber);font-weight:600}.meter-track{background:#ffffff12;border-radius:3px;height:6px;overflow:hidden}#feel-bar{background:linear-gradient(90deg, #b8862a, var(--amber));width:0;height:100%;transition:width 80ms linear;box-shadow:0 0 12px #ffc34d99}.dock{background:var(--glass-strong);border-radius:24px;grid-template-columns:1fr 260px 1fr;align-items:center;gap:18px;width:min(1040px,100% - 52px);padding:14px 18px;display:grid;bottom:22px;left:50%;transform:translate(-50%)}.caption-wrap{gap:10px;display:grid}.progress{background:#ffffff14;border-radius:1px;height:2px;overflow:hidden}#progress-bar{background:var(--accent);width:0;height:100%;box-shadow:0 0 8px var(--accent)}#caption{color:#d7dde3;min-height:4.35em;margin:0;font-size:15px;line-height:1.45}.play{background:var(--text);color:#0b0e12;cursor:pointer;border:0;border-radius:999px;justify-self:start;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;font-size:13px;font-weight:600;transition:transform 80ms,background .15s;display:inline-flex}.play:hover{background:#fff}.play:active{transform:scale(.97)}.play svg{fill:currentColor;width:16px;height:16px}.yoke-wrap{justify-items:center;margin:-70px 0 -6px;display:grid;position:relative}#yoke{cursor:grab;touch-action:none;border-radius:16px;width:260px;height:190px}#yoke.grabbing{cursor:grabbing}.yoke-scale{width:180px;color:var(--muted);grid-template-columns:auto 1fr auto;align-items:center;gap:8px;font-size:10px;font-weight:600;display:grid}.yoke-scale i{background:#ffffff1a;border-radius:1px;height:2px;position:relative}.yoke-scale i:after{content:"";left:calc(50% + var(--p,0) * 50%);background:var(--accent);width:2px;height:8px;box-shadow:0 0 6px var(--accent);margin-left:-1px;position:absolute;top:-3px}.speed-ctl{gap:8px;display:grid}.speed-ctl label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:600}.speed-marks{color:#5e6873;justify-content:space-between;font-size:10.5px;display:flex}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:22px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--accent), #ffffff1f);border-radius:2px;height:4px}input[type=range]::-moz-range-track{background:#ffffff1f;border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#f4f6f8;border:0;border-radius:50%;width:20px;height:20px;margin-top:-8px;box-shadow:0 2px 8px #00000080,0 0 0 4px #4de2ff2e}input[type=range]::-moz-range-thumb{background:#f4f6f8;border:0;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 8px #00000080}.footnote{color:#56606b;margin:0;font-size:10.5px;display:none;bottom:4px;left:26px}@media (height>=820px){.footnote{display:block}.dock{bottom:26px}}@media (width<=1180px){.card{width:220px;padding:16px}.system{width:250px}.speed span{font-size:60px}}@media (width<=900px){.app{flex-direction:column;height:auto;min-height:100dvh;display:flex;overflow:visible}#scene{order:1;height:52vh;min-height:320px;position:relative}.vignette{display:none}.hud{position:static;transform:none}.top{flex-direction:column;order:0;padding:18px 16px 12px}.toolbar{justify-content:flex-start}.dock{z-index:3;order:2;grid-template-columns:1fr;gap:12px;width:auto;margin:-40px 12px 12px;position:relative;bottom:auto;left:auto}.yoke-wrap{order:-1;margin:0}#yoke{width:240px;height:170px}.card{order:3;width:auto;margin:0 12px 12px}.footnote{order:4;margin:4px 16px 20px;display:block}.speed span{font-size:56px}}