:root{--bg:#06131e;--panel:rgba(7,22,32,.83);--line:rgba(130,189,201,.18);--text:#edf6f8;--muted:#86a5b2;--aqua:#64e5d9;--gold:#e2a86d;--mono:'DM Mono',monospace;--sans:'DM Sans',Arial,sans-serif;--head:'Space Grotesk',Arial,sans-serif}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#06131e;color:var(--text);font-family:var(--sans);font-size:13px}
button,input{font-family:inherit}
button{cursor:pointer;transition:background .18s,border-color .18s,color .18s,transform .18s}
button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}
#viewer{position:fixed;inset:0;z-index:0}
#viewer canvas{display:block;width:100%;height:100%}
#viewer:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 52% 45%,transparent 25%,rgba(3,13,22,.34) 100%),linear-gradient(90deg,rgba(1,12,22,.33),transparent 32%,transparent 66%,rgba(1,12,22,.34))}
.hidden{display:none!important}
#app{position:fixed;inset:0;z-index:2;pointer-events:none}
#app>*{pointer-events:none}
.topbar{height:86px;position:absolute;left:33px;right:32px;top:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(178,220,221,.22);pointer-events:auto!important}
.brand{display:flex;align-items:center;gap:14px}
.brand-glyph{font-family:var(--head);font-weight:700;font-size:39px;line-height:1;letter-spacing:-4px;color:#e9f8f7}
.brand-glyph span{color:var(--aqua);font-weight:400}
.brand-title{font-family:var(--head);font-weight:700;letter-spacing:.08em;font-size:18px}
.brand-title span{color:var(--aqua);font-weight:500}
.brand small{font-family:var(--mono);font-size:8px;letter-spacing:.16em;color:#97b5c0;margin-top:5px;display:block}
.top-actions{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.12em;font-family:var(--mono)}
.top-actions .status{color:#c2d4db}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--aqua);box-shadow:0 0 12px var(--aqua);animation:live 2s ease-in-out infinite}
@keyframes live{50%{opacity:.4}}
.status.paused{color:var(--gold)}
.separator{height:22px;width:1px;background:var(--line);margin:0 10px}
.top-actions button{background:rgba(4,17,27,.55);color:#d6e8ea;border:1px solid rgba(178,220,221,.2);padding:10px 14px;font-size:10px;font-family:var(--mono);letter-spacing:.08em}
.top-actions button:hover{border-color:var(--aqua)}
.top-actions button span{color:var(--aqua);margin-left:12px}
.dashboard{position:absolute;inset:108px 31px 62px;display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.glass{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.leftpanel,.rightpanel{pointer-events:auto!important}
.leftpanel{width:322px;max-height:100%;padding:24px 24px 19px;overflow:auto;scrollbar-width:thin;scrollbar-color:#3e636a transparent}
.eyebrow,.section-heading,.mini-heading,.control-top,.range-marks,.switchrow small,.bottom-note,.signal-meter,.inspect-spec,.focus-btn,.footer,.camera-choices,.button-grid{font-family:var(--mono)}
.eyebrow{color:var(--aqua);font-size:9px;letter-spacing:.12em}
h1{font-family:var(--head);font-weight:500;font-size:35px;line-height:1.13;letter-spacing:-1.4px;margin:14px 0 12px}
h1 em{font-style:normal;color:var(--aqua)}
.panelintro{margin:0 0 25px;line-height:1.64;color:#9bb5bf;font-size:11px;max-width:260px}
.section-heading{display:flex;align-items:center;gap:9px;font-size:9px;letter-spacing:.1em;color:#d4e3e7;margin:21px 0 18px;white-space:nowrap}
.section-heading>span:first-child{color:var(--aqua)}
.section-heading .line{height:1px;background:var(--line);flex:1}
.control{margin-bottom:20px}
.control-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:10px;color:#afc3cb;letter-spacing:.05em}
.control-top output{color:var(--aqua);font-size:13px}
input[type=range]{width:100%;height:3px;margin:4px 0 12px;appearance:none;background:linear-gradient(to right,#5ad8d9,#315a69);outline:none;cursor:pointer}
input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid #d4ffff;border-radius:50%;background:#40b7bb;box-shadow:0 0 12px #5bdedb70}
input[type=range]::-moz-range-thumb{width:10px;height:10px;border:2px solid #d4ffff;border-radius:50%;background:#40b7bb}
.range-marks{display:flex;justify-content:space-between;color:#5b7b88;font-size:8px;letter-spacing:.06em}
.switchrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(184,224,224,.075)}
.switchrow strong{display:block;font-weight:500;font-size:11px;color:#e2edef}
.switchrow small{display:block;margin-top:4px;color:#628491;font-size:9px}
.switch{width:34px;height:19px;display:block;position:relative;flex-shrink:0}
.switch input{opacity:0;position:absolute;inset:0}
.switch span{display:block;height:19px;background:#254150;border:1px solid #4b6471;border-radius:16px;transition:.2s;cursor:pointer}
.switch span:before{content:'';display:block;width:11px;height:11px;border-radius:50%;position:absolute;top:4px;left:4px;background:#9eacb4;transition:.2s}
.switch input:checked+span{background:#16666d;border-color:#51b8b7}
.switch input:checked+span:before{transform:translateX(15px);background:#94fff4}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}
.button-grid button{background:#102a37;border:1px solid #264552;color:#abc4ca;font-size:9px;letter-spacing:.03em;padding:12px 5px}
.button-grid button:hover,.button-grid button.active{border-color:var(--aqua);background:rgba(35,111,117,.35);color:#dcf9f6}
.bottom-note{border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;margin-top:23px;padding-top:16px;color:#89a8b3;font-size:9px;line-height:1.7}
.bottom-note span{color:#517888}
.tiny-orb{width:20px;height:20px;border:1px solid #66d5d0;border-radius:50%;box-shadow:inset 0 0 11px #3f9893}
.rightpanel{width:288px;display:flex;flex-direction:column;gap:10px}
.meta-card,.inspect-card,.view-card{padding:20px 19px}
.mini-heading{color:#8bb4bf;font-size:9px;letter-spacing:.12em;display:flex;justify-content:space-between;align-items:center}
.pulse-chip{font-size:8px;color:var(--aqua)}
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 8px;padding:20px 0 20px}
.data-grid small{display:block;color:#789daa;font-size:8px;letter-spacing:.05em;font-family:var(--mono);margin-bottom:6px}
.data-grid strong{font-family:var(--head);font-size:25px;font-weight:500;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.data-grid strong span{font-size:12px;color:var(--aqua);font-weight:400}
.signal-meter{border-top:1px solid var(--line);padding-top:15px}
.signal-meter-label{display:flex;justify-content:space-between;color:#89aeba;font-size:9px;letter-spacing:.06em}
.signal-meter-label span:last-child{color:var(--aqua)}
.meter-bars{height:32px;margin-top:11px;display:flex;align-items:end;gap:3px}
.meter-bars i{display:block;flex:1;background:linear-gradient(#7cf5e4,#228d96);min-height:4px;opacity:.7;animation:bar 1.5s ease-in-out infinite alternate}
.meter-bars i:nth-child(3n){animation-delay:.5s}.meter-bars i:nth-child(4n){animation-delay:.8s}
@keyframes bar{to{transform:scaleY(.55)}}
.info-index{color:var(--aqua)}
.inspect-card h2{font-family:var(--head);font-size:18px;font-weight:600;letter-spacing:.01em;line-height:1.25;margin:17px 0 10px}
.inspect-card p{font-size:11px;color:#a0bac3;line-height:1.65;min-height:73px;margin:0 0 16px}
.inspect-spec{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;color:#80a4b1;font-size:9px;display:flex;justify-content:space-between;gap:7px}
.inspect-spec span{color:#e5f3f5}
.focus-btn{width:100%;border:1px solid #3e7f88;background:#154451;color:#c4f5ee;letter-spacing:.07em;display:flex;justify-content:space-between;padding:14px;margin-top:17px;font-size:10px}
.focus-btn:hover{background:#286672}
.camera-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}
.camera-choices button{border:1px solid var(--line);background:#0b2230;padding:9px 8px;text-align:left;color:var(--aqua);font-size:9px}
.camera-choices button span{color:#a3bec9;margin-left:4px;font-size:8px}
.camera-choices button:hover,.camera-choices button.active{border-color:#61bdbe;background:#1a4651}
.hotspots{position:absolute;inset:0;pointer-events:none!important}
.hotspot{display:flex;position:absolute;align-items:center;gap:7px;transform:translate(-50%,-50%);pointer-events:auto!important;border:1px solid rgba(105,215,219,.4);border-radius:20px;background:rgba(5,29,41,.73);color:#c4edf2;box-shadow:0 0 14px rgba(18,102,107,.25);backdrop-filter:blur(8px);font:9px var(--mono);white-space:nowrap;padding:5px 9px 5px 5px}
.hotspot:hover,.hotspot.selected{border-color:var(--aqua);color:#fff;background:rgba(19,81,90,.8)}
.hotspot-dot{display:block;width:10px;height:10px;border-radius:50%;border:2px solid #6fefe5;box-shadow:0 0 8px rgba(76,218,213,.6)}
.footer{position:absolute;left:32px;right:32px;bottom:0;height:52px;border-top:1px solid rgba(173,213,216,.21);display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.08em;color:#829fa9;gap:10px}
.footer-left,.footer-right{display:flex;align-items:center;gap:14px}
.footer .tag{color:var(--aqua)}
.footer b{font-weight:500;color:#ebeff0}
#app.minimal .leftpanel,#app.minimal .rightpanel,#app.minimal .hotspots,#app.minimal .footer{display:none}
#app.minimal .topbar{opacity:.7}
.loading{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 50%,#152e3b 0,#05111d 65%)}
.loading-mark{font:700 50px var(--head);letter-spacing:-3px;color:#e7f6f4}
.loading-mark span{color:var(--aqua)}
.loading-track{width:192px;height:2px;background:#294251;margin-top:28px;overflow:hidden}
.loading-track div{height:100%;background:var(--aqua);width:40%;animation:load 1.7s ease-in-out infinite}
.loading p{font:10px var(--mono);letter-spacing:.15em;color:#70929e;margin-top:22px}
@keyframes load{0%{transform:translateX(-100%)}100%{transform:translateX(370%)}}
.error{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;background:#081723;text-align:center}
.error strong{font:700 28px var(--head)}.error p{max-width:500px;line-height:1.8;color:#9dbac3}.error code{font:11px var(--mono);color:#e6a77f;max-width:90vw;overflow-wrap:anywhere}
@media(max-width:1190px){.leftpanel{width:290px;padding:19px}.rightpanel{width:245px}.meta-card,.inspect-card,.view-card{padding:14px}.dashboard{inset:96px 20px 59px;gap:13px}.topbar{left:20px;right:20px}.footer{left:20px;right:20px}.footer-right span:nth-child(2){display:none}}
@media(max-width:850px){.rightpanel{display:none}.leftpanel{width:278px}.footer-right span:nth-child(3),.footer-right span:nth-child(4){display:none}.brand small{font-size:7px}.hotspot{font-size:8px}}
@media(max-width:600px){.topbar{height:68px;left:12px;right:12px}.brand-title{font-size:13px}.brand-glyph{font-size:29px}.brand small{font-size:6px}.top-actions .status,.separator,.top-actions button:first-of-type{display:none}.top-actions button{padding:9px}.dashboard{inset:auto 10px 50px;left:10px;right:10px;bottom:55px;top:auto;display:block}.leftpanel{width:100%;height:auto;max-height:37vh;overflow:auto;padding:13px 16px}.leftpanel h1{font-size:21px;margin:8px 0}.leftpanel h1 br{display:none}.leftpanel .panelintro,.leftpanel .bottom-note{display:none}.section-heading{margin:13px 0}.control{margin-bottom:12px}.switchrow{padding:7px 0}.button-grid{grid-template-columns:repeat(4,1fr)}.button-grid button{font-size:8px;padding:9px 2px}.footer{left:10px;right:10px;height:45px;font-size:8px}.footer-left span:nth-child(2),.footer-right{display:none}.hotspot:not(.selected){display:none!important}}
@media(prefers-reduced-motion:reduce){.meter-bars i,.live-dot,.loading-track div{animation:none}}