:root{color-scheme:dark;--bg:#070e1a;--panel:#0b1523;--panel2:#0e1d2b;--text:#e8f3fc;--muted:#8499ac;--muted2:#537087;--border:#1b3040;--cyan:#48d9ee;--sky:#92d8fa;--orange:#f8ae62;--green:#65e5b3;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}button,select,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:72px;background:#081320;border-bottom:1px solid #193040;display:flex;align-items:center;justify-content:space-between;padding:0 30px;flex-shrink:0}.brandlock{display:flex;align-items:center;gap:13px}.brandmark{height:42px;width:42px;display:grid;place-items:center;border:1px solid #4bc7d6;background:linear-gradient(155deg,#063c51,#0a1e32);border-radius:9px;color:#87effe;font-size:27px;box-shadow:inset 0 0 14px #49c5db22}.brand{display:flex;flex-direction:column;gap:4px}.brand strong{letter-spacing:.13em;font-size:19px;font-weight:800}.brand-code{font-weight:500;color:#77b5c5;font-size:14px}.brand small{font-size:9px;color:#8ba8b5;font-weight:700;letter-spacing:.21em}.sep{color:#45d7db;padding:0 3px}.topmeta{color:#8da3b0;font-size:10px;letter-spacing:.15em;font-weight:700;display:flex;align-items:center;gap:11px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5cdab0;box-shadow:0 0 9px #5cdab060}.dot.blue{background:#48d9ee;box-shadow:none}.dot.orange{background:#ffa85f;box-shadow:none}.header-line{display:inline-block;background:#335467;width:1px;height:15px;margin:0 12px}.ghost{background:#122332;border:1px solid #34536a;color:#b9dbeb;border-radius:6px;padding:11px 15px;font-size:10px;font-weight:800;letter-spacing:.11em}.ghost:hover{background:#1b3546}.workspace{display:grid;grid-template-columns:277px minmax(0,1fr) 298px;min-height:calc(100vh - 109px);flex:1;max-height:calc(100vh - 109px)}.sidebar{background:#0a1623;overflow:auto;scrollbar-width:thin;scrollbar-color:#284656 transparent}.controls{border-right:1px solid var(--border);padding:24px 22px 23px}.telemetry{border-left:1px solid var(--border);padding:24px 21px 22px;display:flex;flex-direction:column;gap:17px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.145em;color:#7fa7be}.eyebrow.sky{color:#60c9e5}.faint{font-size:9px;color:#496a7d;font-weight:700;letter-spacing:.1em}.side-intro{padding:17px 0 23px;border-bottom:1px solid #1c3344;margin-bottom:22px}.side-intro h2{font-size:29px;line-height:1.15;letter-spacing:-.045em;font-weight:730;margin:0 0 10px}.side-intro h2 em{font-style:normal;color:#66cde3}.side-intro p{color:#7895a8;font-size:12px;line-height:1.65;margin:0}.input-group{margin-bottom:21px}.input-group>label,.input-group .range-head label{font-size:11px;color:#b8cbd6;font-weight:650}.preset>label{display:block;letter-spacing:.07em;font-size:10px;margin-bottom:9px;color:#94acbc}.select-wrapper{position:relative}.select-wrapper select{width:100%;appearance:none;border:1px solid #2c4b60;color:#d4e9f1;background:#112535;padding:12px;border-radius:6px;outline:none;font-size:12px;cursor:pointer}.select-wrapper>span{position:absolute;right:12px;top:10px;font-size:18px;color:#9bd2df;pointer-events:none}.group-heading{display:flex;gap:12px;align-items:center;margin:23px 0 20px}.group-heading span:first-child{font-size:10px;color:#5ed2df;letter-spacing:.15em;font-weight:800;white-space:nowrap}.small-rule{display:block;height:1px;background:#1d394a;flex:1}.range-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.range-head output{font-size:11px;color:#6ce0ed;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}.input-group input[type=range]{appearance:none;width:100%;margin:14px 0 9px;height:4px;border-radius:4px;background:linear-gradient(90deg,#40b7cd 0%,#40b7cd var(--fill,50%),#233e50 var(--fill,50%),#233e50 100%);outline:0;cursor:pointer}.input-group input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#d1f8ff;border:3px solid #46c4dc;box-shadow:0 0 0 2px #1a4555}.input-group input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#d1f8ff;border:3px solid #46c4dc}.input-group input:disabled{filter:grayscale(1);opacity:.36;cursor:not-allowed}.range-ends{display:flex;justify-content:space-between;color:#527083;font-size:9px;font-weight:650;letter-spacing:.06em}.mode-switch{display:flex;align-items:center;justify-content:space-between;background:#102437;border:1px solid #214153;padding:13px 12px;border-radius:8px;margin-bottom:20px}.mode-switch>span{display:flex;flex-direction:column;gap:3px}.mode-switch strong{font-size:11px;color:#d4e6ee}.mode-switch small{font-size:10px;color:#7399ae}.switch{position:relative;display:inline-block;width:36px;height:19px;flex-shrink:0}.switch input{opacity:0;position:absolute}.switch .slider{position:absolute;inset:0;cursor:pointer;background:#304958;border-radius:40px;transition:.2s}.switch .slider:before{content:'';position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#bfd1dc;transition:.2s}.switch input:checked+.slider{background:#277b90}.switch input:checked+.slider:before{transform:translateX(17px);background:#e8ffff}.particles-row{margin-top:11px;margin-bottom:18px}.control-footnote{background:#0e1c2b;border-left:2px solid #b07446;padding:11px 10px;color:#7794a7;font-size:10px;line-height:1.6}.mono{color:#e5ad74;font-weight:800;font-size:9px;margin-right:6px}.center{min-width:0;display:flex;flex-direction:column;background:#081622}.viewport-wrap{flex:1;position:relative;min-height:360px;overflow:hidden;background:radial-gradient(ellipse at 55% 55%,#13293a 0%,#071525 75%)}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.viewport-head{position:absolute;top:28px;left:34px;right:30px;display:flex;justify-content:space-between;pointer-events:none}.viewport-head h1{font-size:26px;font-weight:750;line-height:1.3;letter-spacing:-.035em;margin:5px 0}.viewport-head h1 span{font-weight:410;color:#91bbcc}.viewport-chip{align-self:start;display:flex;align-items:center;gap:8px;border:1px solid #215363;background:#0d2c3cbb;padding:11px 12px;border-radius:6px;color:#91cedc;font-size:10px;font-weight:750;letter-spacing:.1em}.camera-cue{position:absolute;right:28px;top:97px;color:#6892aa;font-size:9px;font-weight:700;letter-spacing:.09em;pointer-events:none}.camera-cue span{margin:0 5px;color:#b6d2dc}.scene-tag{position:absolute;display:flex;align-items:center;gap:8px;pointer-events:none;opacity:.9}.scene-tag>span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #3d7c92;background:#0c2a3cbf;color:#79e1f0;font-size:9px;border-radius:50%;font-weight:800}.scene-tag div{display:flex;flex-direction:column;gap:3px}.scene-tag strong{color:#c8ecf7;font-size:10px;letter-spacing:.09em}.scene-tag small{color:#6595aa;font-size:9px}.scene-tag.intake{bottom:28%;left:11%}.scene-tag.exhaust{top:34%;right:10%}.view-bottom{position:absolute;bottom:19px;left:30px;right:27px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.view-legend{display:flex;gap:17px}.view-legend>span{color:#a1b6c4;font-size:10px;display:flex;align-items:center;gap:6px}.view-legend b{display:inline-block;border-radius:50%;width:6px;height:6px}.view-legend b.cyan{background:#3fdff7}.view-legend b.amber{background:#ffb75d}.view-legend b.green{background:#5be49e}.view-fps{color:#5a8498;font-size:9px;letter-spacing:.08em}.view-fps span{color:#6cddb4;font-weight:800}.error-overlay{position:absolute;inset:0;background:#091827ef;display:grid;place-content:center;text-align:center;padding:40px}.error-overlay[hidden]{display:none}.error-overlay h2{font-size:20px}.error-overlay p{color:#91acbc;font-size:13px;max-width:400px}.timeline-panel{height:227px;flex-shrink:0;background:#0d1927;border-top:1px solid #234154;padding:19px 28px 13px;display:flex;flex-direction:column}.timeline-head{display:flex;justify-content:space-between;align-items:center}.timeline-head h3{margin:4px 0 0;font-size:15px;font-weight:700}.timeline-head h3 small{font-size:11px;font-weight:400;color:#67899d;margin-left:5px}.chart-legend{display:flex;gap:13px;font-size:10px;color:#94afc0}.chart-legend>span{display:flex;align-items:center;gap:6px}.line{width:14px;height:2px;background:#47def0;display:inline-block}.line.org{background:#ffb56b}.line.dash{height:0;border-top:2px dashed #8fa2b6;background:none}#trend{width:100%;flex:1;min-height:0;margin-top:7px}.timeline-foot{display:flex;justify-content:space-between;color:#658294;font-size:9px;font-weight:700;letter-spacing:.08em}.timeline-foot b{color:#49bed6}.state-card{border:1px solid #29536a;border-radius:8px;padding:15px;background:linear-gradient(155deg,#102c3b,#0c2030)}.state-head{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:10px;color:#8db8c8;letter-spacing:.09em;font-weight:800}.status{color:#74e1b9;font-size:9px}.state-main{display:flex;align-items:center;gap:13px;margin:22px 0}.status-icon{background:#1c5c6b;color:#9bf8f8;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;font-size:32px;line-height:1}.state-main>div:last-child{display:flex;flex-direction:column;gap:4px}.state-main strong{font-size:13px;letter-spacing:.02em}.state-main small{font-size:10px;color:#77a4b7}.servo-meter{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;font-weight:800;color:#8db8c8;letter-spacing:.06em}.servo-meter strong{font-size:20px;color:#e6fafe;font-variant-numeric:tabular-nums;letter-spacing:0}.progress{background:#244357;border-radius:8px;margin:11px 0 7px;height:6px;overflow:hidden}.progress span{display:block;height:100%;width:32%;background:linear-gradient(90deg,#318baa,#62d6dc);border-radius:8px;transition:width .15s}.motor-note{display:flex;justify-content:space-between;color:#5a8698;font-size:9px;font-weight:700}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{background:#102334;border:1px solid #234354;padding:14px 11px;border-radius:7px;display:flex;flex-direction:column;min-width:0}.metric>span{font-size:9px;color:#93bacb;font-weight:800;white-space:nowrap;letter-spacing:.03em}.metric>span small{font-size:9px;color:#68889b}.metric>strong{font-size:37px;line-height:1.6;letter-spacing:-.06em;font-weight:750;font-variant-numeric:tabular-nums}.metric.primary>strong{color:#8debf8}.metric.secondary>strong{color:#f8bc83}.metric-sub{font-size:8px;color:#7996a7;display:flex;align-items:center;gap:7px;letter-spacing:.035em}.metric-sub .dot{width:5px;height:5px}.readings{border:1px solid #203b4c;border-radius:7px;padding:15px 13px 5px;background:#0e1f2e}.readings-head{font-size:10px;font-weight:800;letter-spacing:.11em;color:#a6c6d1;display:flex;justify-content:space-between;margin-bottom:14px}.readings-head span{font-size:9px;color:#5e8094}.reading{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid #1c3344}.reading>span{font-size:11px;color:#8baabd}.reading>strong{font-size:13px;color:#e4eff7;font-weight:700;font-variant-numeric:tabular-nums}.reading strong small{font-size:10px;color:#7794a6;font-weight:500}.control-buttons{display:flex;flex-direction:column;gap:9px;margin-top:auto}.action{width:100%;border-radius:5px;padding:13px 10px;font-weight:850;letter-spacing:.09em;font-size:10px;display:flex;align-items:center;justify-content:center;gap:9px}.primary-action{border:1px solid #52bbcc;color:#052532;background:linear-gradient(95deg,#56ccdb,#6de2de)}.primary-action:hover{filter:brightness(1.13)}.secondary-action{background:#152939;color:#99c3d6;border:1px solid #31556a}.secondary-action:hover{background:#213a4d}.telemetry-footer{display:flex;justify-content:space-between;color:#4d7186;font-size:8px;letter-spacing:.07em;gap:5px}.footer{height:37px;display:flex;justify-content:space-between;align-items:center;background:#060e18;border-top:1px solid #152d3e;color:#58778a;font-size:9px;letter-spacing:.08em;font-weight:650;padding:0 30px}.footer b{color:#438a9b;padding:0 6px}@media(max-width:1220px){.workspace{grid-template-columns:245px minmax(0,1fr) 265px}.controls,.telemetry{padding-left:15px;padding-right:15px}.topmeta{display:none}.viewport-head{left:20px;top:20px}.viewport-head h1{font-size:23px}.viewport-chip{display:none}.scene-tag{display:none}.timeline-panel{padding:16px}.view-legend{gap:9px}}@media(max-width:900px){.workspace{max-height:none;grid-template-columns:1fr 1fr;min-height:0}.center{grid-column:1/-1;grid-row:1;min-height:600px}.controls,.telemetry{overflow:visible;grid-row:2}.controls{border-right:1px solid var(--border)}.telemetry{border-left:0}.viewport-wrap{min-height:430px}.timeline-panel{height:200px}.footer span:nth-child(2){display:none}}@media(max-width:600px){.topbar{padding:0 12px;height:62px}.brand strong{font-size:15px}.brand small{font-size:7px}.ghost{padding:9px}.export-top span{display:none}.workspace{display:flex;flex-direction:column}.center{order:0;min-height:600px}.controls{order:1}.telemetry{order:2}.viewport-head h1{font-size:20px}.viewport-wrap{min-height:390px}.camera-cue{display:none}.view-bottom{left:12px;right:10px}.view-fps{display:none}.timeline-head{align-items:start}.chart-legend{gap:5px}.chart-legend>span{font-size:8px}.timeline-panel{height:195px}.footer{padding:0 12px}.footer span:last-child{display:none}}
/* Keep the desktop workspace strictly inside the viewport; scroll long sidebars. */
@media(min-width:901px){.workspace{height:calc(100vh - 109px);min-height:0;max-height:none;grid-template-rows:minmax(0,1fr)}.sidebar{min-height:0}.center{min-height:0;overflow:hidden}.viewport-wrap{min-height:0}.timeline-panel{min-height:0}}