:root{--bg:#071321;--panel:#0c1929;--panel2:#0c1d2e;--hair:#23374a;--hair2:#1b3043;--text:#dceaf2;--sub:#8099ad;--mint:#53dfce;--orange:#ffbd79;--bright:#f5fafc;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:3px}a{color:inherit;text-decoration:none}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:#081524;border-bottom:1px solid #203548;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand img{filter:drop-shadow(0 0 12px #2caebc30)}.brand-text{display:flex;flex-direction:column;gap:4px}.brand-text strong{font-size:17px;letter-spacing:.16em;color:#fff}.mint{color:var(--mint)}.brand-text small{font-size:9px;letter-spacing:.18em;font-weight:600;color:#688da3}.top-middle{display:flex;gap:11px;align-items:center;font-size:10px;font-weight:700;letter-spacing:.16em;color:#87a4b3}.signal-circle,.live-dot{width:7px;height:7px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 4px #53dfce13,0 0 12px #53dfceaa}.top-divider{height:16px;width:1px;background:#244052;margin:0 7px}.top-actions{display:flex;gap:18px;align-items:center}.edition{font-size:10px;color:#7a9bad;letter-spacing:.13em;white-space:nowrap}.button{border:1px solid var(--hair);background:#142a3b;color:#d8e8f1;padding:11px 17px;border-radius:6px;font-size:11px;font-weight:750;letter-spacing:.09em;display:inline-flex;align-items:center;gap:9px;justify-content:center;transition:background .18s,border-color .18s}.button:hover{background:#1c3a48;border-color:#4a8492}.button.tiny{padding:8px 13px;font-size:10px}.button.outline{background:#0b1b2b}.button.accent{background:linear-gradient(130deg,#31afaa,#70e9cf);color:#06252d;border-color:#5bcdbb;min-width:113px}.button.accent:hover{background:#8af9db}.button.ghost{background:#061423bb}.workspace{flex:1;display:grid;grid-template-columns:minmax(270px,298px) minmax(480px,1fr) minmax(295px,332px);min-height:0}.panel{background:linear-gradient(180deg,#0d1e2e,#0a1828);padding:24px 21px}.controls{border-right:1px solid var(--hair2)}.telemetry{border-left:1px solid var(--hair2)}.panel-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}.eyebrow{font-size:10px;letter-spacing:.155em;font-weight:800;color:#76b5c5}.small-icon{font-size:19px;color:#5d9fac}.section-title{font-size:16px;color:var(--bright);font-weight:690;letter-spacing:-.025em}.muted{color:var(--sub)}.intro{font-size:11px;line-height:1.65;margin:10px 0 20px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.preset{background:#12283a;border:1px solid #2a4052;border-radius:5px;color:#8eafc1;padding:10px 2px;font-size:10px;font-weight:800;letter-spacing:.075em}.preset:hover{color:#f5ffff;border-color:#6bcdbd}.preset.active{background:#153d40;color:#86f2dd;border-color:#369d94;box-shadow:inset 0 0 14px #3bcfb414}.group-label{display:flex;justify-content:space-between;margin:24px 0 19px;align-items:center;color:#638ca2;font-size:9px;font-weight:790;letter-spacing:.17em}.group-label>span:last-child{color:#477187}.group-label.with-gap{margin-top:30px}.slider-stack{display:grid;gap:21px}.slider-row{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;row-gap:12px}.slider-row>span{font-size:12px;font-weight:600;color:#d8e6ee;display:flex;align-items:center;gap:6px}.slider-row small{font-size:10px;font-weight:500;color:#66859b}.slider-row output{font-variant-numeric:tabular-nums;font-size:12px;color:#c5faf0;font-weight:700}.slider-row input{grid-column:1/-1;width:100%;height:4px;appearance:none;outline:0;cursor:pointer;background:linear-gradient(90deg,#2ab6ac,#27435a);border-radius:8px}.slider-row input::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:#92f7de;border-radius:50%;box-shadow:0 0 0 4px #55d9ca1a;border:2px solid #194e50}.slider-row input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#92f7de;border:2px solid #194e50}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.green{background:#44d4a9}.purple{background:#a89bf8}.orange{background:#eda56d}.sky{background:#5da8ff}.select-label{font-size:12px;font-weight:600;display:block;color:#d9e7f2}.select-label select{appearance:none;display:block;color:#d5e4ec;width:100%;background:#102638 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238cc7c2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;border:1px solid #324a5e;border-radius:5px;padding:11px;margin-top:11px;font-size:11px}.slider-row.compact{margin-top:21px}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:17px;cursor:pointer}.toggle-row input{position:absolute;opacity:0;width:0;height:0}.switch{height:19px;width:34px;border-radius:30px;position:relative;background:#284056;transition:background .2s}.switch:after{content:'';position:absolute;top:3px;left:3px;border-radius:50%;height:13px;width:13px;background:#89a7b4;transition:transform .2s}.toggle-row input:checked+.switch{background:#267b79}.toggle-row input:checked+.switch:after{transform:translateX(15px);background:#a2ffdf}.toggle-row input:focus-visible+.switch{outline:2px solid #fff}.note{background:#112a3a;border-left:2px solid #50babc;padding:13px 11px;display:flex;gap:11px;color:#94acbd;font-size:10px;line-height:1.65;margin-top:24px;border-radius:0 4px 4px 0}.note-icon{height:16px;width:16px;flex:0 0 16px;border:1px solid #69bcca;color:#81ddd2;display:grid;place-items:center;border-radius:50%;font-size:10px}.note strong{color:#bde9e7;font-weight:600}.centre{min-width:0;background:#071626;display:flex;flex-direction:column}.scene-head{display:flex;justify-content:space-between;gap:10px;align-items:center;min-height:137px;padding:26px 32px 20px}.scene-head .eyebrow{font-size:10px}.scene-head h1{margin:9px 0 6px;font-weight:720;font-size:clamp(20px,2vw,28px);letter-spacing:-.045em;color:white}.scene-head h1 em{font-style:normal;color:var(--mint)}.scene-head p{color:#88a0b1;margin:0;font-size:12px}.scene-status{display:flex;gap:10px;align-items:center;color:#b0d7d4;font-size:9px;letter-spacing:.12em;white-space:nowrap}.scene-status .live-dot{width:6px;height:6px}.canvas-stage{height:clamp(390px,45vw,620px);position:relative;overflow:hidden;border-top:1px solid #152b3e;border-bottom:1px solid #244053;background:radial-gradient(ellipse at 53% 39%,#17344b 0,#0c2035 49%,#071321 100%)}#viewport{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#06132177,transparent 15%,transparent 82%,#06132166),linear-gradient(0deg,#06132166,transparent 25%)}.viewport-top-left,.viewport-top-right,.viewport-bottom,.viewport-axis{position:absolute;pointer-events:none;z-index:2}.viewport-top-left{top:23px;left:24px;display:flex;gap:8px}.spec-mini{font-size:9px;font-weight:700;letter-spacing:.10em;padding:7px 10px;color:#75b7c5;background:#092235aa;border:1px solid #2855698a;border-radius:4px}.viewport-top-right{right:24px;top:23px;text-align:right;font-size:10px;letter-spacing:.13em;color:#99c6c9}.viewport-top-right small{display:block;font-size:9px;color:#688ea4;margin-top:7px}.viewport-axis{left:24px;bottom:73px;color:#6f95a8;font-size:10px;letter-spacing:.07em;display:flex;gap:9px;align-items:center}.axis-symbol{font-size:19px;color:#6ad8ce}.viewport-bottom{bottom:16px;left:25px;right:23px;display:flex;justify-content:space-between;align-items:center;gap:10px;pointer-events:auto}.legend{display:flex;flex-wrap:wrap;gap:18px;color:#9cbdc8;letter-spacing:.09em;font-size:9px;font-weight:700}.legend>span{display:flex;gap:8px;align-items:center}.legend-line{display:inline-block;width:16px;height:3px;border-radius:2px}.legend-line.cyan{background:#67caff}.legend-line.orange{background:#ffb76b}.legend-line.teal{background:#50d9c6}.transport{min-height:74px;padding:15px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--hair2);gap:12px}.transport-left{display:flex;gap:9px;flex-wrap:wrap}.transport-right{display:flex;align-items:center;gap:12px}.transport-right>span{color:#7b9aaa;font-size:10px;letter-spacing:.1em}.transport-right strong{font-size:15px;color:#effff9;font-variant-numeric:tabular-nums;font-weight:650}.transport-right .fps{font-size:9px;background:#142d3c;border-radius:3px;padding:6px 7px;color:#71baba}.diagnostics-row{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:21px 24px 26px}.diag-panel{min-width:0;border:1px solid #263d50;border-radius:5px;background:#0a1b2b;padding:13px;display:flex;flex-direction:column}.diag-title{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b7d2dd;font-size:10px;font-weight:780;letter-spacing:.1em}.pill{display:inline-flex;align-items:center;font-size:8px;font-weight:800;letter-spacing:.07em;color:#7de9ca;border:1px solid #277f7a;background:#143d40;padding:4px 7px;border-radius:3px;white-space:nowrap}.pill.neutral{background:#122738;color:#78a4b9;border-color:#29465a}.diag-panel canvas{display:block;width:100%;height:138px;margin-top:9px}.scale-legend{display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:#769aaa}.spectrum{height:5px;border-radius:4px;flex:1;max-width:180px;background:linear-gradient(90deg,#115bbb,#39d5d0,#e9e68d,#f29d79)}.trend-foot{display:flex;align-items:center;justify-content:space-between;color:#7497a9;font-size:9px;letter-spacing:.09em;margin-top:auto}.statusbar{padding:13px 23px;display:flex;justify-content:space-between;gap:13px;border-top:1px solid #203448;color:#55778b;font-size:9px;font-weight:750;letter-spacing:.12em}.readout-highlight{padding:16px 18px;background:linear-gradient(118deg,#163e45,#102b3b 78%);border:1px solid #255d61;border-radius:5px;display:flex;align-items:end;justify-content:space-between;gap:6px}.readout-highlight .eyebrow{color:#9fddd9;font-size:9px}.big-value{display:flex;align-items:baseline;gap:9px;margin-top:8px}.big-value strong{font-weight:600;color:#c6fff0;font-size:39px;letter-spacing:-.065em;font-variant-numeric:tabular-nums}.big-value span{font-size:14px;color:#81b8b5}.readout-art{width:78px;flex-shrink:1;max-width:27%;margin-bottom:3px}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}.metric{min-width:0;background:#112536;border:1px solid #273d4e;padding:15px 13px;border-radius:5px;display:flex;flex-direction:column}.metric span{color:#81a5b4;font-size:9px;letter-spacing:.10em;font-weight:750}.metric strong{font-size:25px;color:#fff;font-weight:650;letter-spacing:-.035em;font-variant-numeric:tabular-nums;margin:9px 0 3px}.metric small{font-size:10px;color:#69899c}.sensor-heading{margin:30px 0 11px}.sensor-wrap{border:1px solid #2b4960;border-radius:4px;overflow:hidden;background:#071421}#sensor{display:block;width:100%;height:276px;cursor:crosshair}.spot-inspection{border:1px solid #284759;border-top:none;display:flex;flex-direction:column;gap:6px;background:#0d2637;border-radius:0 0 4px 4px;padding:12px}.spot-inspection span{color:#4fbcb1;font-size:9px;letter-spacing:.12em;font-weight:780}.spot-inspection strong{font-size:12px;color:#dbeaf1;font-weight:650}.spot-inspection small{line-height:1.5;font-size:10px;color:#82a0b3}.reconstruction{margin-top:27px}.reconstruction .panel-heading{margin-bottom:11px}.recon-row{display:flex;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid #24384a;font-size:11px;color:#98b4c2}.recon-row strong{color:#d1f9ee;font-variant-numeric:tabular-nums;font-weight:650}.bottom-note{font-size:9px;font-weight:800;letter-spacing:.1em;color:#6c92a5;margin-top:28px;padding-top:12px;border-top:1px solid #233949}.green-text{color:#6dd8bc;float:right}.bottom-note small{display:block;margin-top:8px;font-size:10px;font-weight:450;line-height:1.5;color:#7c9aac;letter-spacing:0}
@media(max-width:1270px){.workspace{grid-template-columns:260px minmax(430px,1fr) 285px}.panel{padding:20px 15px}.scene-head{padding:20px}.top-middle{display:none}.viewport-top-left{left:12px}.viewport-top-right{right:12px}.big-value strong{font-size:32px}.metric{padding:12px 8px}.metric strong{font-size:21px}.scene-status{display:none}}
@media(max-width:1020px){.workspace{grid-template-columns:270px minmax(0,1fr)}.telemetry{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:18px;border-left:0;border-top:1px solid var(--hair2)}.telemetry>.panel-heading:first-child{grid-column:1/-1}.readout-highlight,.metric-grid{align-self:start}.sensor-heading{grid-column:3;grid-row:2;align-self:start;margin:0 0 12px}.sensor-wrap{grid-column:3;grid-row:2;margin-top:26px}.spot-inspection{grid-column:3}.reconstruction{grid-column:1/3;grid-row:3}.bottom-note{grid-column:1/3;grid-row:4}.telemetry .metric-grid{margin-top:0}#sensor{height:220px}.canvas-stage{height:480px}.edition{display:none}}
@media(max-width:700px){.workspace{display:flex;flex-direction:column}.centre{order:0}.controls{order:1;border-right:0;border-top:1px solid var(--hair2)}.telemetry{order:2;display:flex;flex-direction:column;gap:0}.topbar{height:65px;padding:0 12px}.top-actions{gap:6px}.brand-text strong{font-size:12px}.brand-text small{font-size:7px}.brand{gap:6px}.brand img{width:34px;height:34px}.scene-head{min-height:112px}.scene-head h1{font-size:21px}.canvas-stage{height:400px}.viewport-top-right{display:none}.viewport-top-left{left:10px;top:12px}.spec-mini{font-size:8px}.viewport-bottom{left:10px;right:10px}.legend{gap:8px;font-size:7px}.viewport-axis{left:10px;bottom:65px}.transport{padding:13px;align-items:flex-start;flex-direction:column}.transport-right{align-self:flex-end}.diagnostics-row{grid-template-columns:1fr;padding:12px}.controls{padding:23px}.slider-stack{grid-template-columns:1fr 1fr;gap:18px}.reconstruction,.sensor-wrap,.sensor-heading,.spot-inspection,.bottom-note{grid-row:auto;grid-column:auto}.telemetry>.panel-heading:first-child{margin-bottom:10px}.sensor-heading{margin-top:25px}.metric-grid{margin-top:12px}.statusbar{flex-wrap:wrap;font-size:8px;padding:12px}}