:root{--bg:#07151d;--panel:rgba(8,22,31,.94);--panel2:rgba(12,30,39,.93);--line:#254554;--teal:#65e9d9;--tealMuted:#3a8e91;--text:#dbe8e9;--muted:#819ba8;--amber:#ddaa71;--danger:#ef8759;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#081721;font-family:var(--font);color:var(--text)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}#viewport{position:absolute;inset:0;background:linear-gradient(#a5bfce,#7a96a6)}#viewport canvas{display:block;cursor:grab;touch-action:none}.hidden{display:none!important}.overline,.section-label,.small-label,.minimap-head,.brand-sub,.perf,.panel-bottom,.fineprint{font-size:10px;letter-spacing:.14em;font-weight:750}.overline{color:var(--teal)}h1,h2,h3,p{margin:0}h2{font-size:18px;font-weight:680;letter-spacing:-.028em}h3{font-size:15px}.loading{position:absolute;inset:0;background:#07151d;z-index:30;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.loading h1{font-size:clamp(34px,5vw,70px);letter-spacing:-.06em;margin:13px 0}.loading h1 span{color:var(--teal);font-weight:400}.loading p{font-size:13px;color:#8aa1ab;margin:12px auto 0;max-width:460px}.spinner{height:90px;width:90px;border:1px solid #26424a;display:grid;place-items:center;transform:rotate(45deg);margin-bottom:42px}.spinner-hex{font-size:28px;font-weight:850;color:#69eede;transform:rotate(-45deg)}.loader-bar{width:240px;height:2px;background:#25404b;margin-top:28px;overflow:hidden}.loader-bar span{display:block;background:var(--teal);height:100%;width:35%;animation:load 2s ease-in-out infinite alternate}@keyframes load{from{transform:translateX(-110%)}to{transform:translateX(330%)}}.load-mark{font-size:80px;color:#ffa86b;font-weight:900}
.topbar{position:absolute;z-index:8;left:0;top:0;right:0;height:74px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,17,25,.96);border-bottom:1px solid #294150;padding:0 26px;gap:25px}.identity{display:flex;align-items:center;gap:13px;min-width:350px}.brand-icon{height:42px;width:42px;background:linear-gradient(130deg,#58e8db,#206b78);color:#06222a;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;clip-path:polygon(20% 0,80% 0,100% 25%,100% 80%,77% 100%,20% 100%,0 78%,0 24%)}.brand-icon span{color:#d0f7ec}.brandline{font-weight:850;font-size:20px;letter-spacing:.035em}.brandline b{color:var(--teal);font-weight:450}.brand-sub{color:#8ca7b0;font-size:9px;margin-top:3px}.top-center{display:flex;gap:11px;align-items:center;font-size:10px;font-weight:700;letter-spacing:.11em;color:#8395a3;white-space:nowrap}.status.on{color:var(--teal)}.status.paused{color:var(--amber)}.live-dot,.ledgreen{width:7px;height:7px;border-radius:50%;background:#62e9c9;box-shadow:0 0 13px #42ecd6}.separator{color:#435866}.top-actions{display:flex;gap:7px}.top-actions button{height:34px;border:1px solid #38505d;color:#bcd0d5;background:#172b35;padding:0 14px;font-size:11px;font-weight:760;letter-spacing:.04em}.top-actions button:last-child{font-size:23px;line-height:0}
.left-panel,.right-panel{position:absolute;z-index:6;top:74px;bottom:0;box-shadow:12px 0 45px #0417212a;background:var(--panel);backdrop-filter:blur(16px)}.left-panel{width:294px;left:0;display:flex;flex-direction:column;border-right:1px solid var(--line)}.right-panel{width:320px;right:0;border-left:1px solid var(--line);overflow-y:auto;padding:25px 21px 155px;scrollbar-color:#3c6066 transparent;scrollbar-width:thin}.panel-head{padding:26px 21px 14px}.panel-head h2,.right-panel h2{margin:8px 0;font-size:19px}.panel-head p{font-size:11px;color:var(--muted)}.zone-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#35535b transparent;padding:0 12px 15px}.section-label{margin:18px 9px 8px;color:#66838b;font-size:9px}.zone-btn{width:100%;border:1px solid transparent;background:transparent;display:flex;align-items:center;text-align:left;min-height:41px;padding:7px 9px;color:#b8cad0;gap:10px;font-size:10px;font-weight:730;letter-spacing:.035em;line-height:1.4}.zone-btn:hover{background:#13303b;border-color:#2d4853}.zone-btn.active{background:#173942;border-color:#367e7a;color:#e8fdf4}.zone-led{width:5px;height:5px;border-radius:50%;background:#657e87;flex-shrink:0}.zone-btn.active .zone-led{background:#69f7d8;box-shadow:0 0 8px #69f7d8}.zone-chevron{margin-left:auto;font-size:23px;line-height:0;color:#5f7f83}.panel-bottom{height:46px;border-top:1px solid var(--line);margin-top:auto;display:flex;align-items:center;padding:0 20px;gap:9px;color:#78b6af;font-size:9px;white-space:nowrap}.version{margin-left:auto;color:#698593}
.right-panel>.overline{font-size:10px}.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:18px 0 20px}.kpi{background:rgba(29,53,66,.76);border:1px solid #304c57;min-height:90px;padding:12px 11px}.kpi>span{display:block;font-size:9px;color:#8fa9b4;letter-spacing:.08em;font-weight:750}.kpi b{display:block;font-size:21px;letter-spacing:-.05em;color:#e9f7f5;margin:8px 0 5px}.kpi small{display:block;font-size:8px;color:#5b9d9a;letter-spacing:.08em}.panel-rule{height:1px;background:#29444f;margin:19px 0}.right-panel select{width:100%;background:#162c36;border:1px solid #3a555e;border-radius:0;color:#cae6e1;padding:11px;font-size:10px;font-weight:730;letter-spacing:.06em;margin-top:10px;outline:none}.focus-block{margin-top:14px}.small-label{color:var(--amber)}.focus-block h3{margin:7px 0;color:#e0ebe8}.focus-block p{font-size:12px;color:#92a6ad;line-height:1.63;min-height:55px}.focus-block>button{margin-top:14px;background:#22514f;border:1px solid #34847c;color:#88ecdb;width:100%;height:34px;text-align:left;padding:0 13px;font-size:10px;letter-spacing:.09em;font-weight:800}.focus-block>button span{float:right;font-size:15px}.switch-row{display:flex;align-items:center;justify-content:space-between;min-height:36px;gap:8px;font-size:11px;color:#aec2c8}.switch-row select{width:135px;margin:0;padding:8px}.switch{position:relative;display:inline-flex;align-items:center}.switch input{position:absolute;opacity:0}.switch i{height:18px;width:34px;background:#394e55;border-radius:12px;position:relative;display:block;transition:background .2s}.switch i:before{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#b9ccd3;transition:transform .2s}.switch input:checked+i{background:#268d81}.switch input:checked+i:before{transform:translateX(16px);background:#ebfff7}.view-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.view-buttons button{background:#142b35;color:#c4d7d9;border:1px solid #33515b;min-height:36px;font-size:9px;letter-spacing:.06em;font-weight:760}.view-buttons button:hover,.view-buttons button.active{border-color:#40b6ae;color:#7ef9e3;background:#1d454b}
.bottom-center{position:absolute;z-index:4;bottom:92px;left:294px;right:320px;display:flex;justify-content:center;pointer-events:none}.viewport-hint{display:flex;align-items:center;gap:13px;background:#091c28d9;padding:11px 18px;border:1px solid #34525d;font-size:10px;font-weight:620;letter-spacing:.045em;max-width:100%;overflow:hidden;white-space:nowrap}.viewport-hint b{color:#dff8f5}.viewport-hint span:last-child{color:#87a4ad;font-size:9px}.crosshair{font-size:21px;color:var(--teal)}.bottom-controls{position:absolute;z-index:7;left:294px;right:320px;bottom:0;height:69px;display:flex;align-items:center;padding:0 23px;gap:18px;background:#0b1d28ed;border-top:1px solid #3d5964}.bottom-controls button{border:1px solid #38515b;background:#183440;color:#c5e4e2;font-size:10px;font-weight:750;letter-spacing:.06em;padding:13px 15px;white-space:nowrap}.bottom-controls button.play{background:#246358;color:#d6fcf3;border-color:#348e78}.separator-vertical{height:34px;width:1px;background:#34515b}.speed-block{display:flex;gap:13px;align-items:center;flex:1;min-width:120px}.speed-block>span{font-size:9px;font-weight:780;letter-spacing:.1em;color:#9fb7bc;white-space:nowrap}.speed-block input{width:100%;accent-color:#56e3d0}.speed-block b{color:#64ead6;font-size:14px;min-width:34px}.clock-display{font-variant-numeric:tabular-nums;font-family:monospace;font-size:17px;letter-spacing:.04em;color:#e1ece9;white-space:nowrap}.minimap-holder{position:absolute;left:318px;bottom:158px;width:233px;z-index:5;background:#091a25e8;border:1px solid #36515a;padding:12px 12px 8px}.minimap-head,.minimap-foot{display:flex;justify-content:space-between;color:#96b3b6;font-size:9px;letter-spacing:.06em}.minimap-head span:first-child{color:#9ef5e2}.minimap-holder canvas{width:100%;height:145px;cursor:crosshair;display:block;margin:10px 0}.minimap-foot{font-size:8px;color:#7a9ca7}.minimap-foot span{color:var(--teal)}.perf{position:absolute;right:342px;bottom:93px;display:flex;gap:11px;background:#091d2cd9;padding:9px 13px;color:#82a1ad;font-size:9px}.perf b{color:#e0f6f0;font-family:monospace;letter-spacing:0;font-size:11px}
.inspector{position:absolute;z-index:15;left:315px;top:98px;max-width:360px;background:#0b202df6;border:1px solid #40877f;padding:23px;box-shadow:0 20px 55px #0008}.inspector h2{margin:11px 0;font-size:19px}.inspector p{font-size:12px;color:#acbec6;line-height:1.8}.inspector-rule{height:1px;background:#34515b;margin:13px 0}.inspector-meta{margin-top:19px}.inspector-meta>div{padding:9px 0;border-top:1px solid #234450;font-size:9px;display:flex;justify-content:space-between;color:#789ca6;gap:12px}.inspector-meta b{color:#7bdfce;white-space:nowrap}.close{position:absolute;top:7px;right:10px;color:#cbe3e0;background:transparent;border:0;font-size:25px}.modal{position:absolute;inset:0;z-index:25;display:grid;place-items:center;background:#061117a9}.modal-body{position:relative;max-width:590px;width:calc(100% - 48px);background:#0a202c;padding:33px;border:1px solid #3c7a79;box-shadow:0 25px 100px #000a}.modal-body h2{font-size:25px;margin:14px 0}.modal-body p{font-size:13px;line-height:1.7;color:#a7bfc6}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:24px 0}.help-grid>div{display:flex;justify-content:space-between;gap:10px;padding:13px;background:#18313d;border:1px solid #2c4a56;font-size:10px}.help-grid b{color:#8cf7dc}.help-grid span{color:#bad0d5}.modal-body p.fineprint{font-size:10px;color:#7e9aa4}
@media(max-width:1370px){.right-panel{width:285px;padding:20px 15px 155px}.left-panel{width:252px}.bottom-center{left:252px;right:285px}.bottom-controls{left:252px;right:285px;gap:11px}.minimap-holder{left:272px}.perf{right:300px}.identity{min-width:295px}.brand-sub{font-size:7.5px}.top-center{font-size:9px}}
@media(max-width:1120px){.top-center{display:none}.left-panel{width:220px}.right-panel{width:250px}.bottom-center{left:220px;right:250px}.bottom-controls{left:220px;right:250px;padding:0 10px}.bottom-controls button{padding:10px 8px}.minimap-holder{left:235px;width:195px}.perf{right:265px}.viewport-hint span:last-child{display:none}}
@media(max-width:780px){.topbar{height:60px;padding:0 12px}.identity{min-width:0}.brandline{font-size:16px}.brand-sub{display:none}.brand-icon{width:35px;height:35px;font-size:15px}.left-panel{top:60px;width:150px;bottom:65px}.panel-head{padding:16px 10px 5px}.panel-head h2{font-size:14px}.panel-head p{display:none}.zone-list{padding:0 4px}.zone-btn{font-size:9px;min-height:33px;padding:4px 3px}.section-label{font-size:8px;margin-left:5px}.panel-bottom{display:none}.right-panel{top:auto;bottom:64px;right:0;width:210px;max-height:280px;padding:13px;box-shadow:0 0 15px #0006}.right-panel>.overline,.right-panel>h2,.right-panel .kpi-grid,.right-panel .panel-rule,.right-panel .focus-block,.right-panel .view-buttons{display:none}.right-panel .switch-row{font-size:10px;min-height:31px}.right-panel>select{margin-top:5px}.bottom-controls{left:0;right:0;height:64px;padding:0 10px;gap:6px}.bottom-controls button{font-size:9px}.clock-display{font-size:10px}.speed-block>span{display:none}.speed-block{gap:4px;min-width:65px}.speed-block b{font-size:10px;min-width:28px}.minimap-holder,.perf,.bottom-center{display:none}.inspector{left:165px;right:10px;top:75px;padding:14px}.inspector h2{font-size:16px}}

.setpoint{padding:7px 0 9px}.setpoint>div{display:flex;justify-content:space-between;font-size:10px;color:#9db9c1;letter-spacing:.035em}.setpoint b{color:var(--teal);font-size:12px}.setpoint input{width:100%;margin:10px 0 0;accent-color:#58cfc1;height:10px}