:root{color-scheme:dark;--bg:#07131e;--border:rgba(101,169,186,.23);--muted:#879da9;--teal:#56d8ed;--white:#ebf5f7;--surface:rgba(5,21,32,.88);--font:'DM Sans',system-ui,Arial,sans-serif;--mono:'Rajdhani','Arial Narrow',sans-serif}
*{box-sizing:border-box}
html,body{padding:0;margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:var(--font)}
button,select,input{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;width:100%;height:100%;display:block;touch-action:none}
#vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,13,21,.30),transparent 24%,transparent 75%,rgba(4,13,21,.19)),linear-gradient(0deg,rgba(3,12,18,.52),transparent 26%,transparent 78%,rgba(3,13,20,.45))}
.interface{pointer-events:none;position:absolute;inset:0;color:var(--white)}
.interface>*{pointer-events:auto}
.glass-panel{background:var(--surface);border:1px solid var(--border);box-shadow:0 14px 42px rgba(0,0,0,.20);backdrop-filter:blur(18px)}
.topbar{position:absolute;top:0;left:0;right:0;height:88px;padding:24px 35px;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(to bottom,rgba(2,12,20,.78),rgba(2,12,20,.0));pointer-events:none}
.identity{display:flex;gap:13px;align-items:center}.brand-glyph{font-family:serif;font-size:37px;line-height:1;color:#5ed4e9;text-shadow:0 0 23px #49f0ff5e}.brand-glyph i{position:absolute;width:8px;height:8px;margin-top:16px;margin-left:-23px;background:#fbfdff;border-radius:50%}
.eyebrow,.edition,.section-mark{font-size:9px;font-weight:700;letter-spacing:2px;color:#87a8b8}.eyebrow b,.edition b{color:var(--teal)}
.brand-title{font-family:var(--mono);font-size:30px;font-weight:700;line-height:1;letter-spacing:2.8px}.brand-title span{color:var(--teal);font-weight:600}
.header-right{display:flex;align-items:center;gap:25px}.state-chip,.sync-badge{border:1px solid #4cc0d457;background:rgba(34,123,144,.14);padding:10px 12px;color:#a8ebf2;font-size:10px;letter-spacing:1.3px;font-weight:700}.live-dot{width:6px;height:6px;background:#57f5c7;box-shadow:0 0 10px #57f5c7;display:inline-block;border-radius:50%;margin-right:8px;animation:blink 1.6s infinite}@keyframes blink{50%{opacity:.4}}
.control-panel{position:absolute;left:34px;top:112px;width:305px;max-height:calc(100vh - 151px);overflow:auto;scrollbar-width:thin;scrollbar-color:#347083 transparent;border-radius:3px}
.panel-header{padding:19px 19px 15px;display:flex;align-items:flex-start;justify-content:space-between}.panel-header h1{font-family:var(--mono);font-size:25px;margin:4px 0 0;line-height:1.2;letter-spacing:.4px}.icon-button{border:1px solid var(--border);background:#0d2734;color:#a0d5dc;border-radius:4px;width:25px;height:25px}
.control-content{padding:0 19px 19px}.control-panel.collapsed{max-height:none}.control-panel.collapsed .control-content{display:none}
.field{margin:0 0 18px}.field label{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:12px;color:#d2e5ed;font-weight:600;margin-bottom:9px}.field label span:first-child{font-size:11px;letter-spacing:.6px}.field small{font-size:9px;color:#7596a7;letter-spacing:.6px}.field output{color:var(--teal);font-family:var(--mono);font-size:17px}
select{width:100%;background:#102936;color:#e7f4f7;padding:12px 10px;border:1px solid #244858;outline:none;border-radius:3px;font-family:var(--mono);font-weight:600;font-size:14px;letter-spacing:.4px}
.segment{display:flex;border:1px solid #244656;border-radius:3px;overflow:hidden;background:#112b39}.segment-button{flex:1;background:transparent;color:#7f9fae;border:0;border-right:1px solid #244656;padding:10px 0;font-size:10px;letter-spacing:1.2px;font-weight:700}.segment-button:last-child{border-right:0}.segment-button.active{background:#1c5362;color:#d7fbff;box-shadow:inset 0 -2px #50d5e8}
.parameter-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:15px;color:#acbfca;letter-spacing:1.25px;font-size:9px;font-weight:700}.small-teal{font-size:9px;color:#61cadb;letter-spacing:.6px}
.slider-field{margin-bottom:14px}.slider-field label{margin-bottom:3px}.slider-field label span:first-child{text-transform:none;font-weight:500;letter-spacing:0;font-size:12px}input[type=range]{width:100%;appearance:none;height:3px;background:linear-gradient(90deg,#4acadd 65%,#2a4350 65%);border:0;cursor:pointer;outline:none;margin:9px 0 11px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid #a7f7ff;border-radius:50%;background:#195463;box-shadow:0 0 7px #47d7eb99}input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #a7f7ff;border-radius:50%;background:#195463}.range-marks{display:flex;justify-content:space-between;color:#617c8b;font-size:8px;font-family:var(--mono);letter-spacing:.7px}.panel-divider{height:1px;background:var(--border);margin:19px 0}.switch-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:12px;color:#c6dce5}.toggle{appearance:none;background:#263e4b;border:1px solid #41616c;width:33px;height:18px;border-radius:15px;position:relative;cursor:pointer}.toggle:before{content:'';position:absolute;width:12px;height:12px;background:#809da8;border-radius:50%;top:2px;left:2px;transition:transform .18s}.toggle:checked{background:#21738b;border-color:#48cee6}.toggle:checked:before{background:#d4faff;transform:translateX(15px)}
.footer-actions{display:flex;gap:9px;padding-top:4px}.primary-button,.secondary-button{flex:1;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.6px;padding:10px 4px;border-radius:3px}.primary-button{color:#06212c;background:#73dcec;border:0}.secondary-button{background:#132e3b;color:#9bbdc8;border:1px solid #315366}
.telemetry{position:absolute;top:118px;right:34px;display:grid;grid-template-columns:repeat(4,minmax(105px,143px));gap:8px}.stat-card{background:rgba(4,19,29,.73);border:1px solid rgba(86,146,160,.24);padding:13px 13px 10px;border-radius:3px;backdrop-filter:blur(8px)}.stat-card>span{font-size:8px;letter-spacing:1.15px;color:#8ca7b5;font-weight:700;white-space:nowrap}.stat-card strong{font-family:var(--mono);font-size:31px;font-weight:600;color:#eaf8f9;display:block;line-height:1.2;margin:6px 0 2px}.stat-card strong span,.stat-card strong em{font-size:13px;color:#77b6c4;font-style:normal}.stat-card small{font-family:var(--mono);font-weight:600;font-size:10px;white-space:nowrap;color:#6c929e}.signal-stat strong{color:#8de5f1}
.camera-views{position:absolute;right:34px;top:237px;display:flex;gap:4px;padding:7px;border-radius:3px;align-items:center}.camera-views>span{font-size:9px;letter-spacing:1.6px;color:#6b95a7;font-weight:700;padding:0 12px}.view-button{background:transparent;color:#8aadb8;border:1px solid transparent;font-size:9px;padding:9px 11px;border-radius:2px;font-weight:700;letter-spacing:.5px}.view-button.active{color:#b9f1f8;background:#204858;border:1px solid #2c6d7d}.view-button:hover{color:white}
.inspection{position:absolute;left:356px;bottom:57px;width:305px;padding:15px 18px 16px;border-radius:3px}.inspection-header,.spectrum-head{display:flex;justify-content:space-between;align-items:center;color:#87a7b7;font-size:9px;font-weight:700;letter-spacing:1.4px}.inspection-status{font-size:9px;color:#5adecb}.inspection h2{font-family:var(--mono);font-size:21px;margin:11px 0 5px;color:#e8f7f9;font-weight:600}.inspection p{font-size:11px;line-height:1.6;color:#91aebc;margin:0 0 13px;min-height:34px}.inspect-properties{display:grid;grid-template-columns:87px auto;gap:7px 5px;font-size:9px;padding:10px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.inspect-properties span{color:#6f99aa;letter-spacing:.5px}.inspect-properties b{color:#c4dfe6;font-size:10px;letter-spacing:.3px;font-weight:600}.inspection-actions{display:flex;gap:8px;margin-top:12px}.inspection-actions button{flex:1;background:rgba(56,122,140,.22);border:1px solid #386678;color:#b1dce4;padding:9px 5px;font-size:9px;letter-spacing:.5px;font-weight:700}.inspection-actions button:hover{background:rgba(56,162,185,.35)}
.spectrum{position:absolute;right:34px;bottom:57px;width:330px;border-radius:3px;padding:15px 16px 11px}.spectrum-head{align-items:flex-start}.spectrum-head>div{display:flex;flex-direction:column;gap:5px}.spectrum-head strong{color:#e1f3f7;font-family:var(--mono);font-size:16px;letter-spacing:1px}.sync-badge{font-size:9px;padding:6px 8px}#spectrum-canvas{width:100%;height:91px;display:block;margin-top:11px}.spectrum-footer{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;font-weight:600;color:#73929f;letter-spacing:.4px}.spectrum-footer span:nth-child(2){color:#65d6df}
.bottom-hints{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;white-space:nowrap;font-size:9px;letter-spacing:.8px;color:#8aa3ae}.bottom-hints b{color:#c6dce5}.north-marker{position:absolute;right:38px;top:307px;color:#b6e8ed;display:flex;align-items:center;flex-direction:column;gap:0;font-family:var(--mono);font-size:12px}.north-marker i{font-size:23px;font-style:normal;color:#70d9e8;transform:scaleX(.55)}
.loading{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#143746,#030f18 65%);color:#e4f7fa;transition:opacity .8s,visibility .8s}.loading.hidden{opacity:0;visibility:hidden}.loader-logo{font:700 52px var(--mono);letter-spacing:6px}.loader-signal{font-size:45px;color:#54dcf2}.loader-line{margin-top:30px;width:270px;height:3px;background:#183c4a;overflow:hidden}.loader-line span{display:block;width:45%;height:100%;background:#59d8ed;animation:loadslide 1.5s linear infinite}@keyframes loadslide{from{transform:translateX(-110%)}to{transform:translateX(260%)}}.loading p{font-size:10px;color:#6faec0;letter-spacing:2px;margin-top:18px}#error{position:absolute;top:30%;left:20%;width:60%;z-index:40;background:#351c23;border:1px solid #ff6e87;padding:23px;color:white;font-size:13px;line-height:1.8}
@media(max-width:1350px){.telemetry{grid-template-columns:repeat(2,136px);top:103px}.camera-views{top:273px}.stat-card{padding:10px 12px}.stat-card strong{font-size:24px}.north-marker{top:328px}.control-panel{top:100px;width:280px}.inspection{width:280px}}
@media(max-height:780px){.control-panel{max-height:calc(100vh - 168px)}.inspection{left:350px;width:285px}.spectrum{bottom:48px}}
@media(max-width:960px){.header-right .edition{display:none}.topbar{padding:14px 18px;height:68px}.brand-title{font-size:24px}.control-panel{top:80px;left:12px;width:250px;max-height:55vh}.telemetry{right:12px;top:80px;grid-template-columns:repeat(2,116px)}.stat-card strong{font-size:21px}.stat-card small{font-size:8px}.camera-views{right:12px;top:240px;max-width:260px;flex-wrap:wrap}.camera-views>span{display:none}.inspection{bottom:40px;left:12px;width:260px}.spectrum{right:12px;bottom:40px;width:265px}.north-marker{display:none}.bottom-hints{display:none}}
@media(max-width:620px){.topbar{top:0;padding:12px 14px}.brand-title{font-size:22px}.eyebrow{font-size:7px}.state-chip{font-size:8px;padding:8px}.control-panel{top:77px;left:8px;width:min(60vw,245px);max-height:55vh}.panel-header h1{font-size:19px}.panel-header{padding:10px}.control-content{padding:0 11px 12px}.telemetry{top:77px;right:8px;display:flex;flex-direction:column;gap:4px}.stat-card{width:116px;padding:7px}.stat-card>span{font-size:7px}.stat-card strong{font-size:18px;margin:2px 0}.stat-card small{font-size:7px}.camera-views{top:auto;bottom:184px;left:8px;right:auto;width:calc(100% - 16px);justify-content:space-between}.view-button{font-size:8px;padding:7px}.inspection{bottom:8px;left:8px;max-width:calc(58% - 10px);width:auto;padding:9px}.inspection h2{font-size:15px;margin:5px 0}.inspection p{font-size:9px;margin-bottom:7px}.inspect-properties{display:none}.inspection-actions{margin-top:6px;gap:3px}.inspection-actions button{font-size:7px;padding:7px 3px}.spectrum{bottom:8px;right:8px;max-width:calc(42% - 10px);width:auto;padding:9px}.spectrum-head strong{font-size:11px}.spectrum-head>div>span{font-size:7px}.sync-badge{display:none}#spectrum-canvas{height:82px}.spectrum-footer{font-size:7px}}