:root{color-scheme:dark;--bg:#091420;--panel:#0c1927;--surface:#0e1f2d;--surface2:#102433;--line:#203b4b;--line2:#2c5260;--ink:#ebf6fa;--dim:#7192a5;--muted:#53788a;--cyan:#47dce4;--orange:#ffab68;--white:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:13px;font-weight:400}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);min-width:350px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.eyebrow{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.135em;font-size:9px;font-weight:600;color:var(--dim)}.pane{background:var(--panel);border:1px solid var(--line)}h1,h2,h3,p{margin:0}h1{font-size:22px;letter-spacing:-.06em;font-weight:800;line-height:1.1}h1 span{color:var(--cyan)}h2{font-size:17px;font-weight:630;letter-spacing:-.035em;margin-top:8px}h3{font-size:16px;letter-spacing:-.025em;margin-top:7px}.masthead{height:77px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #233d4c;padding:0 25px;background:#0a1724}.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.mark{width:41px;height:43px;border:1px solid #38828f;display:flex;align-items:center;justify-content:center;position:relative;color:#dafcff;font-size:27px;font-weight:850;clip-path:polygon(0 0,100% 0,100% 80%,80% 100%,0 100%)}.mark b{font-size:12px;color:var(--cyan);position:absolute;right:2px;bottom:2px}.brand .eyebrow{font-size:8px;margin-bottom:6px}.mast-title{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.06em;color:#7b9aac;display:flex;align-items:center;gap:9px}.mast-title strong{font-weight:650;color:#d7eaf0}.status-dot,.pulse-dot{display:inline-block;width:6px;height:6px;background:#5aefa7;border-radius:50%;box-shadow:0 0 12px #5aefa7}.thin{color:#3d5d70}.mast-right{display:flex;align-items:center;gap:18px}.slim{font-size:10px;color:var(--dim)}.live-tag{padding:9px 12px;font:650 9px ui-monospace,monospace;letter-spacing:.06em;border:1px solid #2b6c68;color:#81e7c8;background:#11352d}.workspace{display:grid;grid-template-columns:292px minmax(460px,1fr) 310px;gap:12px;max-width:1920px;margin:0 auto;padding:13px 15px;min-height:calc(100vh - 115px)}.controls,.telemetry{min-width:0;padding:20px 18px;display:flex;flex-direction:column}.side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.index-pill{font-family:monospace;font-size:11px;padding:6px 8px;color:#85e4ed;border:1px solid var(--line2)}.controls section{border-top:1px solid var(--line);padding-top:20px;margin-bottom:23px}.section-head{font:650 10px ui-monospace,monospace;letter-spacing:.105em;color:#d2e4eb;display:flex;justify-content:space-between;margin-bottom:19px}.section-index{font:500 10px ui-monospace,monospace;color:#577b8e}.road-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.surface-tile{min-width:0;padding:10px 2px 11px;display:flex;flex-direction:column;align-items:center;gap:6px;background:#0b1c2a;border:1px solid #244153;color:#9eb5c3;transition:.16s}.surface-tile:hover{border-color:var(--cyan)}.surface-tile.selected{background:#103640;border-color:#2bafba;color:#e8feff;box-shadow:inset 0 0 0 1px #205f6b}.surface-icon{font-size:21px;height:25px;font-weight:400}.dry-icon{color:#c6b38c}.wet-icon{color:#4bdce4}.snow-icon{color:#e2ebf0}.ice-icon{color:#83aecf}.surface-tile strong{font:750 9px ui-monospace,monospace;letter-spacing:.08em}.surface-tile small{font:10px ui-monospace,monospace;color:#7793a2}.control-label{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;color:#bbd0d9;font-size:12px}.control-label output{font:700 17px ui-monospace,monospace;color:var(--ink)}.control-label output small{font-size:10px;color:var(--dim);font-weight:500}.gap-top{margin-top:25px}.controls input[type=range]{width:100%;appearance:none;background:linear-gradient(90deg,#2eacba,#315e70);height:3px;accent-color:var(--cyan);display:block;margin:12px 0 14px}.controls input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:16px;background:#e9feff;border:2px solid #21b9c6;border-radius:2px;box-shadow:0 0 8px #24bdc85a}.range-ends{display:flex;justify-content:space-between;color:#567588;font:9px ui-monospace,monospace}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px;cursor:pointer}.toggle-line b{display:block;font-size:12px;font-weight:600;color:#d3e8ef}.toggle-line small{display:block;color:#658496;font-size:10px;margin-top:5px;line-height:1.3}.switch{position:relative;width:32px;height:18px;flex-shrink:0}.switch input{opacity:0;position:absolute;inset:0;cursor:pointer}.switch i{display:block;position:absolute;inset:0;border:1px solid #4a6979;background:#263544;border-radius:10px;pointer-events:none}.switch i:after{content:"";position:absolute;width:10px;height:10px;left:3px;top:3px;border-radius:50%;background:#8ca1ae;transition:.16s}.switch input:checked+i{background:#1a6570;border-color:#3acbd5}.switch input:checked+i:after{left:17px;background:#9afaff}.control-footer{margin-top:auto!important;margin-bottom:0!important;padding-top:14px!important}.primary-action{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;border:1px solid #48dce8;background:#42c9d6;color:#081926;font-size:11px;letter-spacing:.07em;font-weight:850;padding:0 15px}.primary-action:hover{background:#91f4f7}.primary-action.running{background:#ffb86f;border-color:#ffc98c}.button-ic{font-size:13px}.minor-actions{display:flex;gap:7px;margin-top:9px}.minor-actions button{flex:1;padding:11px 2px;background:#102638;border:1px solid #264355;color:#a9cbd9;font:700 9px ui-monospace,monospace}.minor-actions button:hover{border-color:#479fac;color:#e5fdff}.center{min-width:0;display:flex;flex-direction:column;gap:11px}.viewport{flex:1;min-height:500px;display:flex;flex-direction:column;overflow:hidden}.viewport-title{height:88px;padding:19px 22px 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.viewport-title h2{font-size:21px}.muted-italic{font:italic 13px Georgia,serif;color:#749ca8;font-weight:400;letter-spacing:0}.camera-hint{padding:7px 11px;border:1px solid #24525f;font:600 9px ui-monospace,monospace;color:#8ed9df;letter-spacing:.07em}.scene-container{position:relative;flex:1;min-height:340px;background:radial-gradient(ellipse at 50% 55%,#1d3948 0%,#0b1b2a 55%,#08121f 100%);overflow:hidden}.scene-container>canvas:not(#fallback-canvas){position:absolute;inset:0;width:100%;height:100%;display:block}.scene-container #fallback-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scene-container .view-vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 100px 10px rgba(5,13,23,.56)}.view-label{position:absolute;top:17px;color:#94c1cf;border:1px solid rgba(68,137,153,.35);background:rgba(6,22,35,.76);padding:9px 12px;font:600 9px ui-monospace,monospace;letter-spacing:.06em;display:flex;align-items:center;gap:8px;pointer-events:none}.left-note{left:20px}.right-note{right:20px}.right-note strong{font-size:15px;color:var(--cyan)}.vertical-divider{display:inline-block;width:1px;height:13px;background:#345362;margin:0 4px}.hud-led{width:6px;height:6px;display:inline-block;flex-shrink:0;border-radius:50%;background:#4de6a5;box-shadow:0 0 7px #4de6a5}.hud-bottom{position:absolute;bottom:20px;left:23px;right:23px;display:flex;justify-content:space-between;color:#6c97a5;font:8px ui-monospace,monospace;letter-spacing:.09em;pointer-events:none}.tiny-dash{display:inline-block;width:12px;height:1px;background:#55bec6;margin-bottom:3px}.viewport-footer{height:43px;display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap;padding:0 20px;color:#7999aa;font:9px ui-monospace,monospace;letter-spacing:.035em;border-top:1px solid var(--line)}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 6px 0 12px}.legend-dot:first-child{margin-left:0}.cyan{background:#45dce4}.orange{background:#ffa269}.legend-dash{display:inline-block;width:15px;border-top:1px dashed #9dc6cd;margin:0 7px 3px 10px}.graph-pane{height:243px;min-height:200px;display:flex;flex-direction:column}.graph-header{padding:15px 20px 4px;display:flex;justify-content:space-between;align-items:center}.graph-header h3{font-size:15px;margin-top:4px}.tabs{display:flex;gap:3px}.tabs button{background:none;border:1px solid #24404e;padding:8px 11px;color:#648697;font:9px ui-monospace,monospace}.tabs button.selected{border-color:#358a97;color:#a5f6f8;background:#153441}.chart-zone{flex:1;position:relative;min-height:110px}.chart-zone canvas{position:absolute;inset:0;width:100%;height:100%}.scope-footer{height:33px;padding:0 21px;display:flex;justify-content:space-between;align-items:center;gap:9px;border-top:1px solid var(--line);color:#7596a8;font:8.5px ui-monospace,monospace}.scope-footer .legend-dot{margin-right:4px}.lesson-strip{border:1px solid #285160;background:linear-gradient(90deg,#132e3a,#0f2331);min-height:76px;padding:15px 18px;display:flex;align-items:start;gap:12px}.lesson-symbol{font-size:21px;color:#64dbe6}.lesson-strip p{line-height:1.7;color:#a6c3ce;font-size:11px}.lesson-strip strong{color:#d9f2f5;font:700 10px ui-monospace,monospace}.telemetry .side-head{margin-bottom:24px}.speed-readout{border-top:1px solid var(--line);padding:21px 0 23px}.speed-digit{display:flex;align-items:baseline;gap:9px;margin:12px 0 17px}.speed-digit strong{font:300 62px/.95 ui-monospace,Consolas,monospace;letter-spacing:-.085em;color:#eaffff}.speed-digit span{font:12px ui-monospace,monospace;color:#7ba2b4}.speed-bar{height:5px;background:#1f3b4b;overflow:hidden}.speed-bar span{display:block;height:100%;background:linear-gradient(90deg,#2d8e9e,#57e9e5);width:60%;transition:width .1s}.speed-caption{display:flex;justify-content:space-between;margin-top:10px;font:9px ui-monospace,monospace;color:#6c8c9c}.speed-caption strong{color:#a7d5e0;font-weight:600}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:24px}.metric{background:#102534;border:1px solid #233d4e;padding:14px 12px 11px;min-width:0}.metric small{display:block;font:8.5px ui-monospace,monospace;letter-spacing:.07em;color:#7196a6;min-height:20px}.metric>strong{display:block;font:600 24px ui-monospace,monospace;letter-spacing:-.05em;color:#e4faff;margin-top:8px}.metric strong span{font-size:10px;color:#7294a7;letter-spacing:0}.wheel-panel{border-top:1px solid var(--line);padding-top:20px;margin-bottom:23px}.wheel-headers,.wheel-row{display:grid;grid-template-columns:42px 1fr 1fr 55px;gap:4px;align-items:center}.wheel-headers{font:9px ui-monospace,monospace;color:#607e90;padding-bottom:11px;border-bottom:1px solid #233d4b}.wheel-row{min-height:35px;border-bottom:1px solid #203646;font:11px ui-monospace,monospace;color:#d8edf0}.wheel-row b{font-weight:700;color:#a2cbd3}.wheel-row i{display:inline-flex;align-items:center;justify-content:center;font:800 8px ui-monospace,monospace;letter-spacing:.035em;padding:5px 2px;color:#78e8b4;background:#174032;font-style:normal}.wheel-row i.modulating{background:#3f3424;color:#f9c27f}.wheel-row i.locked{background:#512b2c;color:#ff9898}.wheel-key{display:flex;flex-wrap:wrap;gap:10px;font:8px ui-monospace,monospace;color:#7698a8;margin-top:12px}.key-dot{display:inline-block;width:5px;height:5px;border-radius:50%;vertical-align:middle;margin-right:3px}.key-dot.grip{background:#78e8b4}.key-dot.mod{background:#f9c27f}.key-dot.locked{background:#ff9898}.compare-panel{border-top:1px solid var(--line);padding-top:20px}.compare-panel p{font-size:11px;line-height:1.6;color:#7fa0b0;margin-bottom:15px}.compare-btn{display:flex;align-items:center;justify-content:space-between;background:#122b38;color:#8cdee9;border:1px solid #2f7080;width:100%;padding:13px 10px;font:750 9px ui-monospace,monospace;letter-spacing:.025em}.compare-btn:hover{border-color:#4cdddf;color:white}.compare-results{border:1px solid #316873;background:#14303b;padding:12px;margin-top:10px}.compare-result-row{display:flex;justify-content:space-between;align-items:baseline;font:10px ui-monospace,monospace;color:#8fb3c2;margin-bottom:7px}.compare-result-row strong{color:#e2f9f9;font-size:12px}.compare-gain{margin-top:10px;padding-top:10px;border-top:1px solid #326170;color:#77ebc0;font:700 12px ui-monospace,monospace}.tele-footer{display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);padding:22px 0 0;margin-top:auto}.tele-footer b,.tele-footer span:not(.hud-led){display:block}.tele-footer b{font:700 10px ui-monospace,monospace;color:#b8dde5;letter-spacing:.04em}.tele-footer span:not(.hud-led){color:#6e91a1;font-size:10px;margin-top:5px}.app-footer{height:38px;padding:0 23px;background:#091521;border-top:1px solid #1d3545;display:flex;align-items:center;justify-content:space-between;font:9px ui-monospace,monospace;letter-spacing:.04em;color:#7394a5}.app-footer b{color:var(--cyan)}.app-footer span{color:#4f7285}
@media(max-width:1250px){.workspace{grid-template-columns:260px minmax(380px,1fr) 276px;gap:8px;padding:8px}.controls,.telemetry{padding:17px 13px}.viewport-footer,.scope-footer{font-size:8px}.mast-title{display:none}.speed-digit strong{font-size:54px}}
@media(max-width:1000px){.workspace{grid-template-columns:260px minmax(350px,1fr)}.telemetry{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr 1.4fr;column-gap:20px;align-content:start}.telemetry .side-head{grid-column:1/-1;margin-bottom:15px}.speed-readout{grid-column:1;grid-row:2}.metric-grid{grid-column:2;grid-row:2;align-self:center}.wheel-panel{grid-column:3;grid-row:2}.compare-panel{grid-column:1/3}.tele-footer{grid-column:3;align-self:end}.viewport{min-height:520px}}
@media(max-width:700px){.masthead{height:65px;padding:0 13px}.mast-right .slim{display:none}.workspace{grid-template-columns:1fr}.controls{grid-row:2}.center{grid-row:1}.viewport{min-height:500px}.scene-container{min-height:340px}.viewport-title{height:78px;padding:15px}.viewport-title h2{font-size:17px}.camera-hint{font-size:8px}.telemetry{grid-row:3;display:block}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.controls .side-head{grid-column:1/-1;margin-bottom:0}.controls section{margin:0}.controls section:first-of-type{grid-column:1/-1}.controls .control-footer{grid-column:1/-1}.speed-digit strong{font-size:56px}.app-footer{height:auto;gap:7px;padding:15px;flex-wrap:wrap}.hud-bottom>div:last-child{display:none}}
@media(max-width:480px){.controls{display:block}.controls section{margin-bottom:20px}.viewport-title .camera-hint{display:none}.view-label{font-size:8px;padding:7px}.right-note{top:52px;left:20px;right:auto}.graph-header{padding:12px}.tabs button{font-size:8px;padding:7px}.scope-footer .mono{display:none}.viewport-footer{height:auto;padding:13px;font-size:8px;line-height:1.8}.speed-digit strong{font-size:58px}}