:root{font-family:Inter,Arial,Helvetica,sans-serif;color:#c6d5dc;background:#050b15;font-synthesis:none;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #55e2fa;outline-offset:2px}#app{height:100dvh;min-height:560px;overflow:hidden}.app-shell{display:flex;flex-direction:column;height:100%;background:radial-gradient(ellipse at 50% 32%,#15242c 0%,#070d18 72%)}
.topbar{flex:0 0 73px;min-height:73px;display:flex;align-items:center;padding:0 29px;gap:25px;background:linear-gradient(90deg,#08121d,#0a1420 47%,#08121b);border-bottom:1px solid #24404b;z-index:4;box-shadow:0 5px 30px #0007}.brand-mark{display:flex;align-items:center;gap:12px;min-width:208px}.brand-hex{font-size:46px;line-height:1;color:#50dbe8;text-shadow:0 0 23px #20cfdf55}.brand-mark strong{display:block;font-size:17px;letter-spacing:.19em;font-weight:850;color:#e7f3f2}.brand-mark small{display:block;letter-spacing:.17em;font-size:9px;color:#627e89;margin-top:4px}.top-divider{height:32px;width:1px;background:#24434d}.headline{display:flex;flex-direction:column;gap:4px}.eyebrow{color:#4c9aa7;letter-spacing:.18em;font-size:9px;font-weight:800}.headline-title{font-size:15px;font-weight:800;letter-spacing:.08em;color:#e0ebeb}.headline-title b{font-weight:400;color:#85aab4}.top-spacer{flex:1}.system-status{color:#62adba;font-size:10px;letter-spacing:.1em;white-space:nowrap}.status-pulse,.live-dot{display:inline-block;width:6px;height:6px;border-radius:100%;background:#56d4ac;box-shadow:0 0 9px #49dcb2;margin-right:8px;vertical-align:2px}.status-aux{color:#41626c}.outline-btn{border:1px solid #345563;background:#0d222a;color:#abdae0;padding:11px 15px;font-size:10px;letter-spacing:.13em;font-weight:800}.outline-btn:hover,.line-button:hover,.camera-btn:hover{background:#173a47;color:#d4ffff}
.mobile-modes-panel,.mobile-camera-panel{display:none}.workbench{flex:1;min-height:0;display:grid;grid-template-columns:266px minmax(220px,1fr) 286px}.panel{min-width:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#27505b #08121b;background:#09121c;z-index:2}.left-panel{border-right:1px solid #21323c}.right-panel{border-left:1px solid #21323c}.section{padding:18px 21px 20px;border-bottom:1px solid #20313b}.section-id{font-size:9px;letter-spacing:.18em;color:#589dab;font-weight:800}.asset-number{font-size:58px;letter-spacing:.02em;font-weight:900;color:#e6f6f2;margin-top:5px;line-height:1.05}.asset-number>span:first-child{color:#56d6e6}.tiny-tag{font-size:13px;color:#5dc4d7;font-weight:600;letter-spacing:.2em}.asset-sub{color:#74939b;font-size:10px;letter-spacing:.09em;margin:9px 0 18px}.property{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:10px 0;border-top:1px solid #1c303b}.property span{font-size:9px;color:#69808a;letter-spacing:.07em}.property b{font-size:10px;color:#c2dadd;text-align:right;letter-spacing:.02em;font-weight:600}
.mode-list{margin-top:13px;display:grid;gap:5px}.mode-choice{background:transparent;border:1px solid transparent;width:100%;color:#7e99a4;display:flex;gap:11px;text-align:left;align-items:center;padding:11px 8px}.mode-choice.active{background:linear-gradient(90deg,#18343f,#10212b);border-color:#2d5b6b;box-shadow:inset 3px 0 #4bd1e7}.mode-choice:hover{background:#142a35}.mode-num{font-family:monospace;color:#477a89;font-size:12px}.mode-text{font-size:11px;letter-spacing:.12em;font-weight:800;flex:1}.mode-text small{display:block;letter-spacing:.02em;font-size:10px;font-weight:400;color:#597784;margin-top:5px}.mode-choice.active .mode-text{color:#dcf3f5}.chevron{font-size:20px;color:#317a8d}
.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:15px 0}.camera-btn{min-height:34px;border:1px solid #2b4350;background:#0c1d27;color:#86a1aa;font-size:10px;letter-spacing:.1em;font-weight:700}.camera-btn.selected{border-color:#45b9d0;color:#ddf8fb;background:#17313b}.camera-btn small{color:#50cfda}.line-button{width:100%;border:1px solid #2c4954;background:#0b1e28;color:#7bc6d5;text-align:left;font-size:10px;font-weight:700;padding:12px;letter-spacing:.055em;display:flex;justify-content:space-between}.line-button span{color:#68929f}.help-section{color:#617985;font-size:10px;line-height:1.6}.help-section p{margin:10px 0 0}kbd{font:9px monospace;color:#92cbd6;border:1px solid #34515b;padding:2px 4px;border-radius:2px}
.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 44%,#192731 0%,#050c17 73%);touch-action:none}.viewport canvas{display:block;width:100%;height:100%}.viewport-vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#040b1480,transparent 20%,transparent 73%,#020812aa),radial-gradient(ellipse at center,transparent 20%,#030a1566 100%)}.view-floater{position:absolute;z-index:1;top:18px;font-size:10px;color:#9ac7cd;letter-spacing:.09em;white-space:nowrap;pointer-events:none}.top-left{left:20px}.top-right{right:20px;color:#80a1ac}.minor,.separator{color:#345967}.signal-ring{font-size:16px;color:#4dcde1;vertical-align:-1px;margin-right:5px}.viewport-bottom-left{position:absolute;left:24px;bottom:27px;color:#c9e5e5;display:flex;align-items:baseline;gap:9px;font-size:10px;letter-spacing:.11em;flex-wrap:wrap;pointer-events:none}.viewport-bottom-left .cross{color:#5de5e9;font-size:28px}.viewport-bottom-left strong{font-size:19px;letter-spacing:.1em}.viewport-bottom-left span{color:#8daeb7}.viewport-bottom-left small{flex-basis:100%;color:#4e7380;letter-spacing:.12em}.viewport-bottom-right{position:absolute;right:17px;bottom:28px;font-size:9px;letter-spacing:.07em;color:#507786;text-align:center;pointer-events:none}.mini-compass{font-size:12px;color:#8ab8c4;margin-bottom:10px}.mini-compass span{color:#41ccdc;font-size:27px;margin:0 8px}.annotations,.leader-lines{position:absolute;pointer-events:none;inset:0;width:100%;height:100%;overflow:hidden}.annotation{pointer-events:auto;position:absolute;min-width:105px;max-width:190px;white-space:nowrap;transform:translate(8px,-50%);border-left:2px solid #45dcef;padding:7px 11px;background:#071722df;color:#cce8eb;box-shadow:0 4px 20px #0006;font-size:10px;letter-spacing:.07em;cursor:pointer}.annotation:hover,.annotation.active{background:#17404a;color:white;border-color:#e6b56c}.annotation span{display:block;font-size:8px;color:#70a1ae;margin-top:4px}.leader-lines path{stroke:#3ecbe0;stroke-width:1;opacity:.63;fill:none}.leader-lines circle{fill:#45e2ef;stroke:#071a23;stroke-width:2}.toast{pointer-events:none;position:absolute;z-index:4;top:58px;left:50%;transform:translate(-50%,-10px);background:#13343fef;border:1px solid #4cc6d9;padding:9px 17px;color:#e1f6f6;font-size:11px;opacity:0;transition:opacity .25s,transform .25s;max-width:75%;text-align:center}.toast.visible{opacity:1;transform:translate(-50%,0)}
.telemetry-title{font-size:11px;font-weight:800;color:#d3e9e9;letter-spacing:.04em;margin:20px 0 20px}.telemetry-title span{float:right;font-size:9px;color:#4bcfe1}.telemetry-block{margin-bottom:18px}.metric-top{display:flex;align-items:baseline;justify-content:space-between;text-transform:uppercase;margin-bottom:8px;gap:5px}.metric-top span{color:#819eab;font-size:9px;letter-spacing:.08em}.metric-top strong{font-size:16px;color:#bdecef;font-family:'SFMono-Regular',Consolas,monospace;font-weight:500;white-space:nowrap}.metric-top small{font-size:9px;color:#6ca9b6}.progress-bar{height:3px;background:#1e3a47;overflow:hidden}.progress-bar div{height:100%;width:0;background:linear-gradient(90deg,#147a95,#64efff);transition:width .09s}.telemetry-notice{font-size:9px;color:#547783;line-height:1.6;margin:13px 0 0}.control-range{margin:15px 0}.control-range label{display:flex;justify-content:space-between;font-size:9px;color:#8eaeb8;letter-spacing:.04em}.control-range b{font-family:monospace;color:#8fe2f0;font-size:11px;font-weight:500}.manual-hint{color:#597985;font-size:10px;line-height:1.5;margin:10px 0 19px}.control-range input[type=range],.speed-control input[type=range],.volume-row input{width:100%;margin:14px 0 0;cursor:pointer;accent-color:#42cfe4;height:4px}.inspector-highlight{border-left:2px solid #3b7585;background:#10222c;padding:11px 13px;margin:15px 0 20px}.inspector-heading{font-size:11px;letter-spacing:.07em;color:#c9e7e9;font-weight:800}.inspector-highlight p{color:#718f9c;font-size:10px;line-height:1.6;margin:9px 0 0}.setting-row{display:flex;align-items:center;gap:10px;font-size:10px;color:#91aab4;margin:16px 0;justify-content:space-between}.setting-row select{color:#b3d4db;background:#142731;border:1px solid #31515c;padding:7px 10px;font-size:10px}.setting-row input[type=checkbox]{accent-color:#46d4e9;width:15px;height:15px;cursor:pointer}.setting-row.volume-row{display:block}.volume-row input{display:block}
.transport-panel{flex:0 0 126px;background:#07131e;border-top:1px solid #28505e;z-index:3;padding:14px 25px 13px}.timeline-header{display:flex;align-items:center;gap:21px}.state-tag{color:#48b9c5;font-size:9px;letter-spacing:.11em}.timeline-numbers{font:11px Consolas,monospace;color:#74adb9;margin-left:auto}.timeline-main{display:flex;align-items:center;gap:22px;margin-top:15px}.transport-buttons{display:flex;gap:6px;flex:0 0 auto}.transport-buttons button{width:37px;height:39px;border:1px solid #2c4955;background:#0b222c;color:#8dc4d3;font-size:17px}.transport-buttons .major-button{background:#18adc3;color:#06121b;border:1px solid #38ddef;font-size:16px;font-weight:800}.transport-buttons button:hover{filter:brightness(1.2)}.timeline-container{flex:1;min-width:0}.timeline-container input{width:100%;accent-color:#54deef;cursor:pointer;height:9px;margin:0}.timeline-ticks{display:flex;justify-content:space-between;color:#5a7a84;font-size:9px;letter-spacing:.07em;margin-top:10px}.end-controls{display:flex;gap:25px;align-items:center}.loop-control{white-space:nowrap;display:flex;align-items:center;gap:7px;color:#9dbbc2;font-size:10px}.loop-control input{accent-color:#3dd8e8}.speed-control{display:flex;gap:11px;align-items:center;font-size:10px;color:#96bac4;white-space:nowrap}.speed-control input{width:84px;margin:0}.speed-control strong{color:#b4e4ed;font-family:monospace}.footnote{height:29px;flex:0 0 29px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;font-size:8px;letter-spacing:.1em;color:#426572;background:#050d16;border-top:1px solid #142833}
@media(max-width:1400px){.workbench{grid-template-columns:236px minmax(200px,1fr) 250px}.section{padding:17px 15px}.topbar{gap:14px;padding:0 18px}.brand-mark{min-width:195px}.headline-title{font-size:13px}.footnote{font-size:7px}.transport-panel{padding-left:17px;padding-right:17px}.end-controls{gap:11px}}
@media(max-width:1050px){.workbench{grid-template-columns:202px minmax(180px,1fr) 211px}.system-status .status-aux,.top-divider,.headline{display:none}.asset-number{font-size:43px}.property{flex-direction:column;align-items:flex-start;gap:3px}.property b{text-align:left}.right-panel .section{padding:13px}.transport-panel{flex-basis:135px}.timeline-main{gap:11px}.timeline-ticks{font-size:8px}.end-controls{flex-direction:column;align-items:flex-end;gap:4px}}
@media(max-width:760px){#app{height:100dvh;min-height:640px}.topbar{flex-basis:53px;min-height:53px;padding:0 13px}.brand-hex{font-size:33px}.brand-mark strong{font-size:14px}.brand-mark small{font-size:8px}.system-status{font-size:8px}.desktop-only{display:none}.workbench{display:grid;grid-template-columns:1fr;grid-template-rows:minmax(290px,1fr) 230px;overflow:hidden}.viewport{grid-row:1}.left-panel{display:none}.right-panel{grid-row:2;display:flex;overflow-x:auto;overflow-y:hidden;border-top:1px solid #1a3340;border-left:0;scrollbar-width:thin}.right-panel .section{flex:0 0 260px;overflow-y:auto;padding:10px 16px}.telemetry-title{margin:12px 0}.telemetry-block{margin-bottom:10px}.control-range{margin:10px 0}.control-range input[type=range]{margin-top:8px}.viewport-bottom-left{bottom:13px;left:12px;font-size:8px}.viewport-bottom-right{display:none}.view-floater{top:10px;font-size:8px}.top-right{right:10px}.top-left{left:10px}.annotation{font-size:8px;min-width:80px;padding:6px 8px;max-width:130px}.transport-panel{flex:0 0 117px;padding:11px 11px}.timeline-main{margin-top:13px;gap:9px}.transport-buttons button{width:30px;height:34px;font-size:15px}.speed-control label{display:none}.speed-control input{width:54px}.timeline-ticks span:nth-child(2),.timeline-ticks span:nth-child(3){display:none}.end-controls{gap:4px}.footnote{height:18px;flex-basis:18px;font-size:7px;padding:0 10px}.footnote span:nth-child(2){display:none}}

@media(max-width:760px){
 .right-panel .mobile-modes-panel,.right-panel .mobile-camera-panel{display:block;flex:0 0 195px;}
 .mobile-modes-panel .mode-list{margin-top:9px;gap:2px}.mobile-modes-panel .mode-choice{font-size:10px;padding:8px 11px;letter-spacing:.06em}
 .mobile-camera-panel .camera-grid{margin:9px 0;gap:6px}.mobile-camera-panel .camera-btn{min-height:34px}
 .transport-panel{flex:0 0 121px}.timeline-header{gap:8px;justify-content:space-between}.timeline-header .section-id{font-size:8px;letter-spacing:.08em;max-width:155px}.timeline-header .state-tag{font-size:8px;letter-spacing:0;white-space:nowrap}.timeline-numbers{font-size:9px;white-space:nowrap;margin-left:0}
 .timeline-main{display:grid;grid-template-columns:141px minmax(0,1fr);grid-template-rows:34px 22px;gap:7px 9px;margin-top:10px}
 .transport-buttons{grid-column:1;grid-row:1;gap:4px}.transport-buttons button{width:31px;height:33px}.timeline-container{grid-column:2;grid-row:1;display:flex;align-items:center;width:100%}.timeline-container input{min-width:0}.timeline-ticks{display:none}
 .end-controls{grid-column:1/-1;grid-row:2;flex-direction:row;justify-content:space-between;align-items:center;gap:20px}.speed-control{gap:9px}.speed-control label{display:inline}.speed-control input{width:120px}
}