:root{color-scheme:dark;--bg:#061522;--panel:#0b2030;--panel2:#0a1d2a;--border:#1e3b4d;--text:#e4f2f4;--muted:#7e9cac;--cyan:#4ac6dc;--teal:#53dfba;--amber:#ebba73;--font:'Segoe UI',Inter,system-ui,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);font:13px/1.5 var(--font);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}a{color:inherit;text-decoration:none}#app{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:76px;flex:0 0 auto;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#071926}
.brand{display:flex;align-items:center;gap:13px}.brandmark{width:43px;height:43px;border:1px solid #407c84;display:grid;place-items:center;color:#92f8df;font-size:28px;font-weight:500;line-height:1;background:radial-gradient(circle at 30% 30%,#236277,#0c2937)}.brand strong{font-size:19px;letter-spacing:2px}.brand em{font-style:normal;color:var(--cyan);font-weight:400}.brand small{display:block;font-size:9px;letter-spacing:2.1px;color:var(--muted);margin-top:1px}.top-right{display:flex;gap:28px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:1px}.chip-status{color:#8de8cb}.chip-status i,.live-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px #5befbf;margin-right:8px}.top-link{border:1px solid var(--border);padding:8px 12px;color:#bdd4df}.top-link:hover{border-color:var(--cyan)}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:0;max-width:1900px;margin:auto;width:100%;flex:1;min-height:0}.left{min-width:0;padding:22px 25px 25px 28px}.right{background:#091b29;border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0;max-height:calc(100vh - 116px);position:sticky;top:0}.eyebrow{color:var(--cyan);font-size:10px;font-weight:650;letter-spacing:2px}.slash{color:#486777;padding:0 4px}.stage-wrap{border:1px solid var(--border);background:#0a1e2c}.stage-head{display:flex;justify-content:space-between;align-items:center;padding:17px 20px}.stage-head h1{font-size:21px;line-height:1.2;margin:7px 0 0;letter-spacing:-.5px;font-weight:580}.stage-chip{color:#84a8b8;letter-spacing:1px;font-size:10px}.stage-chip b{color:var(--teal)}.stage{position:relative;height:clamp(320px,44vh,570px);overflow:hidden;background:radial-gradient(ellipse at 52% 38%,#20415a 0%,#0b2437 44%,#061522 92%)}#world{width:100%;height:100%;touch-action:none;display:block;cursor:grab}#world:active{cursor:grabbing}.stage-overlay{position:absolute;inset:0;pointer-events:none}.scene-label{position:absolute;left:-1000px;top:-1000px;font:700 10px var(--font);letter-spacing:1px;color:var(--teal);text-shadow:0 1px 10px #031a29;white-space:nowrap;transform:translate(-50%,-50%);opacity:.9}.scene-label span{display:block;margin-top:1px;font-weight:550;letter-spacing:1.1px;font-size:9px;color:#d2eefa}.stage-left-bottom{position:absolute;bottom:16px;left:18px;color:#89aebd;font-size:9px;letter-spacing:1.1px;pointer-events:none}.view-symbol{font-size:19px;vertical-align:middle;margin-right:7px;color:var(--cyan)}.dot{padding:0 7px}.stage-badge{position:absolute;right:17px;bottom:18px;font-size:9px;letter-spacing:1px;color:var(--teal);background:#051a26cc;padding:7px 9px;border:1px solid #1b5660;pointer-events:none}.transport{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;gap:10px}.transport-actions{display:flex;gap:7px;flex-wrap:wrap}.btn{background:#132d3f;border:1px solid #2b5363;color:#c3dce7;padding:9px 13px;min-width:77px;font-size:12px}.btn:hover{background:#1b3b4f}.btn.primary{background:#19515a;border-color:#2d8384;color:#9ff7dc}.btn span{font-weight:600;font-size:10px;letter-spacing:1px;margin-left:5px}.transport-meta{font-size:10px;letter-spacing:.8px;color:var(--muted);white-space:nowrap}.transport-meta b{color:#bbd6e0;font-weight:550}.transport-meta .divider{display:inline-block;height:13px;border-left:1px solid #355063;margin:0 10px;vertical-align:middle}
.metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:15px 0}.metric{padding:16px 17px;background:#0b2030;border:1px solid var(--border);min-width:0}.metric-label{font-size:10px;letter-spacing:1px;color:#8eabba;white-space:nowrap}.metric-value{font-size:29px;font-weight:600;letter-spacing:-1.2px;margin:7px 0;color:#f1f8f7;line-height:1.2;font-variant-numeric:tabular-nums}.metric-value small{font-size:13px;letter-spacing:0;color:#9db5c0}.metric-foot{font-size:10px;color:#7293a3;white-space:nowrap}.indicator{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}.indicator.cyan,.key.cyan{background:var(--cyan)}.indicator.teal,.key.teal{background:var(--teal)}.indicator.amber,.key.amber{background:var(--amber)}
.bottom-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:15px}.data-card{background:#0b2030;border:1px solid var(--border);min-width:0;padding:17px 19px 16px}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:5px}.card-heading h2{margin:4px 0 0;font-size:16px;font-weight:550}.live-pill{color:var(--teal);font-size:9px;letter-spacing:1px}.graph-zone{position:relative;height:136px;margin-top:13px;padding:7px 11px 14px 24px}#signalPlot{display:block;width:100%;height:100%}.plot-axis{position:absolute;top:1px;left:0;display:flex;flex-direction:column;justify-content:space-between;height:96px;color:#7197a7;font-size:9px}.plot-axis span{margin:20px 0}.plot-label{position:absolute;right:0;bottom:-1px;color:#637f91;font-size:8px;letter-spacing:1px}.graph-legend{display:flex;align-items:center;gap:16px;border-top:1px solid #1d3748;padding-top:12px;color:#8ca8b5;font-size:10px}.graph-legend .key{width:9px;height:3px;display:inline-block;vertical-align:middle;margin-right:5px}.graph-legend b{margin-left:auto;color:var(--amber);font-size:9px;font-weight:500;white-space:nowrap}.text-btn{border:0;background:none;color:var(--cyan);font-size:9px;letter-spacing:1px;padding:4px 0}.outlet{margin-top:18px}.outlet-row{display:flex;justify-content:space-between;margin-bottom:8px;color:#aec3cd;font-size:11px}.outlet-row b{color:#e7f0f2;font-size:12px}.track{height:7px;background:#18384a;border-radius:2px;overflow:hidden}.fill{width:0;height:100%;transition:width .2s}.target{background:#4ee0b4}.false{background:#dbad72}.waste{background:#47a3d5}
.control-head{padding:24px 23px 15px;border-bottom:1px solid var(--border)}.control-head h2{font-size:21px;letter-spacing:-.3px;margin:7px 0}.control-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.controls-scroll{overflow:auto;overscroll-behavior:contain;flex:1;scrollbar-width:thin;scrollbar-color:#214457 transparent}.control-section{padding:21px 24px;border-bottom:1px solid var(--border)}.section-title{font-size:10px;letter-spacing:1.4px;font-weight:650;color:#bcd7dd;margin-bottom:22px}.section-no{color:var(--cyan);margin-right:8px}.slider-block{margin-bottom:23px}.slider-top{display:flex;justify-content:space-between;gap:6px;align-items:center;margin-bottom:11px}.slider-top label{color:#b1ccd6;font-size:12px}.slider-top output{color:#68dbc9;font-variant-numeric:tabular-nums;font-size:11px;font-weight:650}input[type=range]{display:block;width:100%;appearance:none;-webkit-appearance:none;height:3px;outline:none;border-radius:3px;background:linear-gradient(to right,#4dd3c2 0%,#4dd3c2 var(--fill,50%),#264658 var(--fill,50%),#264658 100%);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;border:2px solid #dffcf1;background:#37c8b1;box-shadow:0 0 8px #31bca488}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:2px solid #dffcf1;background:#37c8b1}.range-poles{display:flex;justify-content:space-between;margin-top:8px;color:#688696;font-size:9px}.parameter-readout{background:#0e2938;border:1px solid #234553;padding:10px 12px;display:grid;gap:9px}.parameter-readout div{display:flex;justify-content:space-between}.parameter-readout span,.field-readout span{color:#7193a1;letter-spacing:.7px;font-size:9px}.parameter-readout strong{font-size:11px;color:#e0f3f1;font-weight:580}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;margin:5px 0 18px}.toggle-row b{font-size:12px;font-weight:550}.toggle-row small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.toggle-row input{position:absolute;opacity:0}.switch{width:34px;height:19px;border-radius:20px;background:#294b60;display:inline-block;position:relative;border:1px solid #466477;transition:background .2s}.switch:after{content:'';position:absolute;top:3px;left:3px;width:11px;height:11px;background:#819bad;border-radius:50%;transition:transform .2s}.toggle-row input:checked+.switch{background:#277766}.toggle-row input:checked+.switch:after{transform:translateX(15px);background:#b9ffe9}.field-readout{border:1px solid #234a56;background:#0d2733;padding:11px}.field-readout strong{float:right;color:var(--teal);font-size:13px}.mini-track{height:5px;background:#1c4352;margin:12px 0 5px;clear:both}.mini-track div{height:100%;width:0;background:var(--teal)}.field-readout small{font-size:9px;color:var(--muted)}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:23px}.preset{border:1px solid #254d5c;background:#102b3b;padding:10px 5px;color:#9cb7c5;font-size:9px;letter-spacing:.5px}.preset:hover,.preset.active{border-color:#52c7b8;color:#b9f9e6;background:#194344}.control-footer{display:flex;justify-content:space-between;padding:13px 22px;font-size:9px;color:#648393;border-top:1px solid var(--border);letter-spacing:.6px}.control-footer b{color:#a0c2cc;font-weight:500}.footer{display:flex;justify-content:space-between;padding:13px 28px;border-top:1px solid var(--border);background:#061522;font-size:9px;letter-spacing:.8px;color:#7495a4}.dim{color:#355868}.error-overlay{position:absolute;inset:30px;background:#081f2ce8;border:1px solid #9c5864;color:#facbd0;padding:30px;z-index:20;font-size:16px}
@media(max-width:1120px){.workbench{grid-template-columns:minmax(0,1fr) 300px}.left{padding:17px}.metric{padding:13px 10px}.metric-label{font-size:9px}.metric-value{font-size:24px}.bottom-grid{grid-template-columns:1fr}.stage{height:430px}}
@media(max-width:850px){.topbar{padding:0 15px;height:68px}.top-right .version,.top-right .top-link{display:none}.workbench{display:block}.right{position:static;max-height:none}.controls-scroll{overflow:visible}.left{padding:14px}.stage{height:380px}.metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-grid{grid-template-columns:1fr}.controls-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.control-section{border-right:1px solid var(--border)}}
@media(max-width:540px){.brand strong{font-size:14px}.brand small{font-size:7px;letter-spacing:1px}.top-right{font-size:9px}.stage-head h1{font-size:17px}.stage-chip{display:none}.stage{height:310px}.transport{align-items:flex-start;flex-direction:column}.controls-scroll{display:block}.stage-left-bottom{font-size:8px;max-width:65%;line-height:1.8}.scene-label{font-size:8px}.scene-label span{font-size:7px}.footer{flex-direction:column;gap:4px}.metric-foot{white-space:normal}}