:root{color-scheme:dark;--bg:#0d222d;--panel:#132d38;--panel2:#17333f;--text:#edf4f0;--muted:#91a9ad;--line:rgba(181,210,206,.15);--mint:#85e5b9;--yellow:#f4c16a;--font:Inter,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:#091a23;color:var(--text);font-family:var(--font)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #7ce6bd;outline-offset:3px}a{color:var(--mint)}
.app-shell{max-width:1800px;min-height:100vh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px;padding:0 33px;border-bottom:1px solid var(--line);background:#0b202b}
.brand{display:flex;gap:12px;align-items:center}.brand-icon{font-size:35px;color:var(--mint);line-height:1}.brand strong{display:block;letter-spacing:.17em;font-size:16px}.brand-period{color:var(--mint)}.brand small{display:block;margin-top:6px;font-size:8px;letter-spacing:.21em;color:var(--muted)}
.topbar-mid{font-size:10px;font-weight:650;letter-spacing:.17em;color:#b7c6bf}.online-pip,.live-dot{display:inline-block;width:7px;height:7px;background:#76ddad;border-radius:50%;margin-right:8px;box-shadow:0 0 11px #70f5b56b}.topbar-divider{margin:0 13px;color:#4f7980}
.topbar-right{display:flex;align-items:center;gap:16px}.project-badge{font-size:9px;letter-spacing:.14em;font-weight:750;color:var(--mint);padding:10px 12px;border:1px solid #57877a88;background:#1b433f}.icon-btn{width:33px;height:33px;border-radius:50%;border:1px solid #63807f;background:transparent;color:#d8eae5;font-weight:750}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 384px;flex:1;min-height:710px}.scene-panel{display:flex;flex-direction:column;min-width:0;padding:28px 28px 0;gap:19px}.eyebrow{font-size:9px;color:var(--mint);letter-spacing:.20em;font-weight:750}.scene-heading h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;font-weight:570;margin:9px 0 7px}.scene-heading p{margin:0;color:#99b3b7;font-size:12px;line-height:1.55}
.viewport{position:relative;min-height:380px;max-height:660px;flex:1;background:linear-gradient(175deg,#c5d8d4,#96bcc1);border:1px solid #426975;overflow:hidden;border-radius:3px;box-shadow:0 17px 45px #030e1255}.viewport canvas#sceneCanvas{display:block;width:100%;height:100%;touch-action:none;outline:0}
.viewport-top{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;pointer-events:none}.view-chip{color:#e6f0e8;letter-spacing:.12em;font-size:9px;background:#152f3bbd;backdrop-filter:blur(10px);border:1px solid #bad0c733;padding:10px 12px;font-weight:720}.slash{color:#81aab0;margin:0 8px}
.zoom-note{position:absolute;bottom:78px;left:19px;font-size:9px;letter-spacing:.16em;font-weight:700;color:#123c4b;background:#e8f6e7b0;padding:9px 10px;pointer-events:none}.zoom-note span{margin:0 7px}.orientation{position:absolute;right:18px;top:72px;width:35px;height:52px;text-align:center;color:#174554;font-size:10px;font-weight:800;background:#edf5ecbc;padding:7px 5px}.compass-arrow{display:block;font-size:19px}.view-tools{position:absolute;bottom:18px;right:18px;display:flex;gap:5px;background:#102d3de8;padding:5px;border:1px solid #68939a69}.view-btn{border:0;background:transparent;color:#a5bdc0;letter-spacing:.08em;font-weight:750;font-size:9px;padding:10px 12px}.view-btn:hover,.view-btn.selected{background:#2b5260;color:#f4fffa}
.scene-marker{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;border:1px solid #e4f4ea66;border-radius:20px;background:#0d2937d9;color:#f0fcf3;box-shadow:0 3px 12px #102f4650;padding:5px 10px 5px 5px;white-space:nowrap;font-size:8px;font-weight:750;letter-spacing:.08em;pointer-events:auto;transition:background .2s}.scene-marker:hover{background:#255a60}.marker-pip{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:#90e3b9;color:#143a34;font-size:12px}.labels-layer{position:absolute;inset:0;pointer-events:none}.labels-layer button{pointer-events:auto}
.error-overlay{position:absolute;inset:12% 8%;background:#17343ef2;z-index:3;padding:35px;color:#fff;font-size:16px;line-height:1.6}.error-overlay[hidden]{display:none}
.stats-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:5px 0 22px;border-bottom:1px solid var(--line)}.stat{padding:0 19px;border-right:1px solid var(--line);min-width:0}.stat:first-child{padding-left:2px}.stat:last-child{border:0}.stat small{display:block;color:#8caab2;font-size:9px;letter-spacing:.13em;font-weight:700}.stat strong{display:block;margin-top:9px;font-size:28px;letter-spacing:-.03em;font-weight:500;white-space:nowrap}.stat strong span{color:#adc7c7;font-weight:500;font-size:13px;margin-left:3px}.mini-progress{margin-top:13px;height:3px;background:#34505a;border-radius:3px}.mini-progress i{display:block;width:4.5%;height:100%;background:var(--mint);border-radius:3px;transition:width .1s}.stat-sublabel{font-size:9px;color:#758f95;margin-top:10px;letter-spacing:.025em}
.interpretation{display:flex;gap:14px;margin-bottom:25px;align-items:flex-start}.interpretation-icon{width:22px;height:22px;min-width:22px;border-radius:50%;border:1px solid #6c9794;color:#9ed2bc;display:grid;place-items:center;font-size:12px}.interpretation p{font-size:10px;line-height:1.7;color:#93aeb2;margin:0}.interpretation p strong{color:#c6d9d5}
.console{background:#12303b;border-left:1px solid #42616b;display:flex;flex-direction:column;min-width:0}.console-top{padding:31px 25px 17px}.console h2{font-weight:530;margin:8px 0 9px;letter-spacing:-.02em;font-size:23px}.console-top p{font-size:11px;color:#95aeb2;margin:0;line-height:1.6}.status-row{display:flex;align-items:center;gap:12px;padding:15px 25px;background:#173a43;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.status-icon{border-radius:50%;width:11px;height:11px;background:#c0c9b4;box-shadow:0 0 0 4px #c5d5bd24}.status-icon.running{background:#66e2a9;box-shadow:0 0 0 4px #70e5aa25}.status-icon.warning{background:#edc171;box-shadow:0 0 0 4px #edc17130}.status-icon.danger{background:#f78d89;box-shadow:0 0 0 4px #f78d8940}.status-row div{flex:1}.status-row small{font-size:8px;letter-spacing:.15em;color:#83a2a7;display:block}.status-row strong{font-size:10px;letter-spacing:.08em;display:block;margin-top:5px;color:#dce9e6}.status-code{font-size:9px;color:#6d989c}
.control-section{padding:21px 25px 0}.section-name{font-size:9px;font-weight:750;letter-spacing:.15em;color:#c9d8d4;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:15px}.section-name span{color:var(--mint);margin-right:10px}.action-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:9px}.action-grid.secondary-grid{margin-top:8px}.action{border:1px solid #597b80;background:#21424c;color:#e1f0ed;padding:13px 9px;text-align:center;font-size:10px;letter-spacing:.055em;font-weight:800;white-space:nowrap;transition:filter .2s,background .2s}.action:hover{filter:brightness(1.1)}.action.primary{background:#86dfb8;color:#0b322b;border-color:#86dfb8}.action.primary.active{background:#b4e9c7}.action.primary span:first-child{margin-right:7px}.action.tertiary{background:#294551}.action.stop{background:#452f38;border-color:#87535b;color:#ffb4ab}.action.stop.latched{background:#f2ad9a;color:#412425}
.control-field{margin:17px 0 24px}.control-field label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.09em;font-weight:750;color:#c6d8d3}.control-field output{color:#d0f2db;font-size:12px;letter-spacing:0;font-variant-numeric:tabular-nums}.control-field input[type=range]{display:block;width:100%;margin:14px 0 5px;height:4px;appearance:none;-webkit-appearance:none;background:#365961;border-radius:2px;accent-color:var(--mint);cursor:pointer}.control-field input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:var(--mint);border:2px solid #224a48;box-shadow:0 0 0 3px #7cdbab22}.control-field input[type=range]::-moz-range-thumb{height:11px;width:11px;border-radius:50%;background:var(--mint);border:0}.range-limits{display:flex;justify-content:space-between;color:#79979d;font-size:9px}.section-mini{font-size:9px;font-weight:700;letter-spacing:.13em;color:#91b2b5;margin:4px 0 11px}.preset-row{display:flex;gap:7px}.preset{flex:1;border:1px solid #426875;background:#1a3946;color:#aac7c8;padding:10px 5px;font-size:8px;font-weight:750;letter-spacing:.035em}.preset.active{border-color:#83d7b2;background:#214c4b;color:#baf2d9}
.tabs-section{padding-bottom:17px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid #43626b}.tab{background:transparent;border:0;color:#839fa3;padding:8px 3px 12px;font-size:10px}.tab.active{color:#b5efd1;border-bottom:2px solid var(--mint)}.tab-panel{min-height:155px;padding-top:14px}.tab-panel[hidden]{display:none}.tab-panel p{font-size:11px;line-height:1.65;color:#b9c9c7;margin:4px 0 11px}.tab-panel small{font-size:9px;color:#8fb1b4;line-height:1.5}.tab-panel a{font-size:10px}.equation{padding:8px 9px;background:#0c2b36;font-size:11px;margin:7px 0;color:#d2f1e3;overflow-wrap:anywhere}.chart-header{display:flex;justify-content:space-between;color:#92aeb4;font-size:9px;font-weight:700;letter-spacing:.08em}.chart-header strong{color:#a8e8bf;font-size:10px}.data-chart{width:100%;height:78px;display:block;margin-top:10px}.sensor-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;padding-top:12px;border-top:1px solid var(--line)}.sensor-grid small{font-size:9px;color:#77979f;letter-spacing:.05em;display:block}.sensor-grid strong{font-size:12px;display:block;margin-top:5px;font-weight:630;font-variant-numeric:tabular-nums}
.console-bottom{margin-top:auto;border-top:1px solid var(--line);padding:15px 25px 22px;display:flex;align-items:center;justify-content:space-between;gap:13px}.toggle{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;cursor:pointer}.toggle input{position:absolute;opacity:0}.toggle-ui{width:28px;height:16px;border-radius:9px;border:1px solid #6a8b92;display:inline-block;background:#274550;flex-shrink:0;position:relative}.toggle-ui:after{position:absolute;content:"";width:10px;height:10px;background:#aec3c6;left:2px;top:2px;border-radius:50%;transition:transform .2s}.toggle input:checked+.toggle-ui{background:#3e876f}.toggle input:checked+.toggle-ui:after{transform:translateX(12px);background:#bff5d9}.toggle small{display:block;color:#789ca3;font-size:8px;margin-top:4px;font-weight:400}.config>span{font-size:8px;color:#819ea2;display:block;margin-bottom:5px}.config select{background:#244956;color:#c9e7e0;border:1px solid #547783;font-size:9px;letter-spacing:.03em;padding:7px 5px;width:112px}
footer{display:flex;gap:10px;justify-content:space-between;border-top:1px solid var(--line);padding:18px 32px;font-size:8px;font-weight:700;letter-spacing:.10em;color:#65858d}footer em{font-style:normal;color:var(--mint);margin:0 4px}
dialog{background:#16323e;color:#eff8f2;border:1px solid #68968f;max-width:480px;width:calc(100% - 30px);padding:0;box-shadow:0 30px 100px #020f13a8}dialog::backdrop{background:#06121bbd}.dialog-inner{padding:30px}.dialog-inner h2{font-size:26px;font-weight:550}.dialog-inner p{font-size:13px;line-height:1.75;color:#b6ccca}.dialog-inner .fine-print{font-size:11px;color:#b1a7a0}.dialog-inner kbd{padding:2px 6px;background:#2c4e58;border:1px solid #65848a}.dialog-inner .action{margin-top:10px}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 330px}.topbar-mid{display:none}.console-top,.control-section,.console-bottom,.status-row{padding-left:18px;padding-right:18px}.scene-panel{padding:23px 18px 0}.stat{padding:0 12px}.stat strong{font-size:24px}.view-btn{padding:10px 7px}}
@media(max-width:820px){.workspace{grid-template-columns:1fr}.scene-panel{padding:20px 14px 0}.viewport{height:min(70vh,540px);min-height:355px;max-height:none;flex:none}.console{border-left:0;border-top:1px solid #42616b}.console-top{padding-top:24px}.console-bottom{margin-top:8px}.stats-bar{padding-bottom:20px}footer{flex-direction:column;padding:16px;line-height:1.5}.project-badge{display:none}}
@media(max-width:510px){.topbar{height:65px;padding:0 16px}.brand strong{font-size:14px}.scene-heading h1{font-size:30px}.viewport{height:430px;min-height:320px}.scene-marker{font-size:7px;padding:3px 5px 3px 3px}.marker-pip{width:14px;height:14px;font-size:10px}.view-tools{bottom:12px;right:9px;left:9px;justify-content:center;gap:2px}.view-btn{font-size:8px;flex:1;padding:9px 2px}.zoom-note{bottom:61px;left:10px;font-size:7px}.stats-bar{grid-template-columns:1fr 1fr;row-gap:20px}.stat{padding:0 10px}.stat:nth-child(2){border-right:0}.stat:nth-child(3){padding-left:2px}.scene-panel{gap:15px}.viewport-top{left:9px;right:9px;top:9px}.view-chip{padding:7px;font-size:7px}}