
:root{color-scheme:dark;--bg:#080f19;--glass:rgba(9,20,31,.84);--stroke:rgba(111,178,200,.2);--white:#e9f5f8;--muted:#74919d;--cyan:#8ee5ef;--accent:#f0ac56;--mono:'IBM Plex Mono',Consolas,'Courier New',monospace;--display:'Barlow Condensed','Arial Narrow',Impact,sans-serif}
*{box-sizing:border-box}body{margin:0;background:#080f19;color:var(--white);font-family:var(--mono);font-size:12px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.3;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sim-shell{position:relative;width:100%;height:100dvh;min-height:620px;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#1b2a37,#070e17 74%)}.view-layer{position:absolute;inset:0;touch-action:none}.viewport-canvas{display:block;width:100%;height:100%;outline:none}.top-wash{pointer-events:none;position:absolute;inset:0 0 auto;height:190px;background:linear-gradient(to bottom,rgba(4,12,21,.72),transparent)}
.glass-ui{background:linear-gradient(155deg,rgba(13,28,40,.87),rgba(8,19,30,.78));border:1px solid var(--stroke);box-shadow:0 16px 50px rgba(0,0,0,.21),inset 0 1px 0 rgba(219,247,255,.045);backdrop-filter:blur(16px)}
.header-glass{position:absolute;left:0;top:0;width:100%;min-height:112px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:25px 39px 12px;pointer-events:none;z-index:4;border-bottom:1px solid rgba(137,208,220,.11)}.brand-block{max-width:850px}.eyebrow{font:600 10px/1.4 var(--mono);letter-spacing:.175em;color:var(--cyan)}.pulse-dot,.green-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#4ee4d8;box-shadow:0 0 10px #4ee4d8;margin-right:6px;vertical-align:middle}.sid{color:#7895a2;margin-left:7px}.header-glass h1{font:800 clamp(27px,3vw,42px)/1 var(--display);letter-spacing:.08em;margin:9px 0 7px}.thin{color:#5ca9bb;font-weight:400}.model-suffix{font-weight:400;font-size:.53em;color:#bad4dc;letter-spacing:.14em}.subtitle{color:#8ba5b0;font-size:9px;letter-spacing:.17em}.header-status{min-width:265px;text-align:right}.tagline{display:flex;gap:8px;justify-content:flex-end}.tag{border:1px solid rgba(131,206,225,.3);background:rgba(28,59,68,.35);padding:7px 11px;font-size:9px;letter-spacing:.12em}.tag.amber{color:var(--accent);border-color:rgba(240,172,86,.45);background:rgba(129,77,25,.12)}.tag.is-working{color:#79ebc9;border-color:#56caad}.icon-tag{color:#b1dbdf}.header-meta{display:flex;justify-content:flex-end;gap:27px;margin-top:16px}.header-meta span{display:flex;flex-direction:column;gap:4px}.header-meta b{font-size:12px;font-weight:600;color:#e5ebee}.header-meta em{font-size:9px;color:var(--muted);font-style:normal;letter-spacing:.13em}
.left-panel,.right-panel{position:absolute;top:135px;z-index:5;padding:17px 18px 17px;width:250px;max-height:calc(100dvh - 345px);overflow:auto;scrollbar-width:thin;scrollbar-color:#376170 transparent}.left-panel{left:24px}.right-panel{right:24px;width:240px}.panel-top{display:flex;justify-content:space-between;align-items:center}.panel-top .eyebrow{font-size:9px}.crosshair{color:#6db1c2;font-size:19px}.panel-title{font:600 23px/1 var(--display);letter-spacing:.095em;padding:11px 0 16px;border-bottom:1px solid rgba(112,171,189,.14)}.panel-title span{font-weight:300;color:#a4c0c8}.section-heading{color:#7698a5;font:500 9px/1.2 var(--mono);letter-spacing:.16em;margin:18px 0 11px}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.tile{border:1px solid rgba(129,172,188,.21);background:rgba(23,42,52,.45);min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#8eabb8;font-size:8px;letter-spacing:.055em;gap:5px;transition:all .16s}.tile span{font-size:19px;line-height:1;color:#72aabc}.tile:hover,.tile.selected{border-color:#65b8c8;background:rgba(56,132,148,.18);color:#ebffff}.tile.selected span{color:#a2f4f1}.mode-actions{display:grid;gap:6px}.mode-btn{padding:10px 9px;background:rgba(12,31,42,.58);border:1px solid rgba(107,160,176,.15);text-align:left;color:#a6c3cd;font-size:9px;letter-spacing:.05em;display:flex;align-items:center;gap:9px}.mode-btn>span{font-size:15px;color:#6ca8ba}.mode-btn i{font-style:normal;margin-left:auto;color:#6d8490;font-size:8px}.mode-btn:hover,.mode-btn.active{border-color:rgba(108,204,218,.6);color:#ebfbff}.mode-btn.active i{color:var(--cyan)}
.selection-info{min-height:73px;background:rgba(5,15,23,.58);border:1px solid rgba(77,124,143,.26);padding:12px;display:flex;flex-direction:column;gap:5px}.selection-empty{color:#64818d;font-size:9px;line-height:1.6}.selection-info .selection-id{color:var(--cyan);font-size:9px;letter-spacing:.13em}.selection-info strong{font-size:11px;color:#d6e9ee}.selection-info>span{font-size:9px;line-height:1.4;color:#9bb6bc}.selection-info p{font-size:9px;color:#77939f;line-height:1.5;margin:3px 0 0}.wide-btn{width:100%;margin-top:7px;background:rgba(26,73,82,.32);color:#9ac9d0;border:1px solid rgba(113,192,207,.37);padding:10px 8px;font-size:9px;letter-spacing:.05em}.wide-btn:hover:not(:disabled){background:rgba(25,105,113,.38)}select{outline:0;border:1px solid rgba(106,161,178,.33);color:#bad6e1;background:#142936;padding:10px 9px;font-size:10px;letter-spacing:.045em;cursor:pointer}#quality{width:100%}.hint-text{color:#547682;font-size:9px;line-height:1.8;letter-spacing:.07em;margin-top:15px}
.right-panel .radial-gauge{--progress:0%;margin:15px auto 18px;width:176px;height:176px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(from 210deg,var(--cyan) var(--progress),rgba(87,143,164,.21) var(--progress));box-shadow:0 0 35px rgba(46,176,189,.05);position:relative}.radial-gauge:before{content:'';position:absolute;inset:8px;background:#10212d;border-radius:50%;border:1px solid #294451}.gauge-inner{z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px}.gauge-inner .eyebrow{font-size:8px;letter-spacing:.1em;color:#6f9fab}.gauge-inner strong{font:700 60px/1 var(--display);color:#d9f6f5;letter-spacing:.005em}.gauge-inner strong span{font-size:22px;font-weight:400;color:#68b4bf}.gauge-inner small{font-size:8px;color:#819da7;letter-spacing:.1em}.readout{position:relative;padding:10px 0 12px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;border-top:1px solid rgba(98,144,162,.15)}.readout>span{font-size:9px;color:#89a4af;letter-spacing:.04em}.readout strong{font-size:12px;color:#e0f4f5;font-weight:500}.readout .bar{height:2px;background:rgba(96,155,172,.18);grid-column:span 2}.readout .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#326e8a,#8ce4e6);box-shadow:0 0 8px #44bbd7;transition:width .075s}.twin-telemetry{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.twin-telemetry>div{padding:12px 9px;background:rgba(4,15,23,.52);border:1px solid rgba(100,146,160,.16);display:flex;flex-direction:column;gap:7px}.twin-telemetry span{font-size:8px;color:#769aa5}.twin-telemetry strong{font:600 18px var(--display);letter-spacing:.06em}.readout-note{margin-top:15px;font-size:8px;color:#738f9b;letter-spacing:.045em}.green-dot{width:5px;height:5px}
.footer-gradient{pointer-events:none;position:absolute;bottom:0;left:0;right:0;height:340px;background:linear-gradient(to top,#030a11 5%,rgba(3,10,17,.75) 38%,transparent)}.control-deck{position:absolute;z-index:6;bottom:24px;left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 590px));min-width:550px;padding:15px 18px 11px;max-height:calc(100dvh - 115px);overflow-y:auto}.deck-heading{display:flex;justify-content:space-between;align-items:center}.deck-heading>div{display:flex;flex-direction:column;gap:5px}.deck-heading .eyebrow{font-size:9px}.deck-heading strong{font:600 18px var(--display);letter-spacing:.08em}.sequence-time{font-size:10px;color:#708c98}.sequence-time b{color:#e6f8ff;font-size:15px}.timeline-row{display:flex;gap:10px;align-items:center;margin-top:12px}.timeline-row>span{color:#7796a1;font-size:9px}input[type=range]{appearance:none;-webkit-appearance:none;height:4px;width:100%;margin:0;cursor:ew-resize;border-radius:0;background:rgba(104,158,178,.29)}#timeline{background:linear-gradient(90deg,#84e9ee var(--fill),rgba(104,158,178,.27) var(--fill));flex:1}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;cursor:grab;background:#ddfdff;border:2px solid #478ea5;border-radius:2px;box-shadow:0 0 14px rgba(109,231,237,.6)}input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#ddfdff;border:2px solid #478ea5;border-radius:2px}.milestones{display:flex;justify-content:space-between;padding:7px 20px 8px;color:#607b8a;font-size:8px;letter-spacing:.02em;border-bottom:1px solid rgba(96,153,166,.2)}.deck-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:11px}.transport-controls,.secondary-controls{display:flex;align-items:center;gap:5px}.action-btn{background:rgba(26,53,65,.59);border:1px solid rgba(92,155,174,.30);color:#a8d1dd;display:flex;align-items:center;gap:7px;min-height:34px;padding:0 11px;font-size:9px;letter-spacing:.07em}.action-btn:hover,.action-btn.playing{background:rgba(52,125,139,.29);color:white;border-color:#8ee5ef}.action-btn .ico{font-size:15px}.action-btn[data-action=play]{background:#77dae0;color:#0d222e;border-color:#95fbff;font-weight:600}.action-btn[data-action=play].playing{box-shadow:0 0 16px rgba(123,226,229,.45)}.toggle-action{min-height:34px;display:flex;align-items:center;gap:6px;padding:0 8px;border:1px solid rgba(92,155,174,.20);background:rgba(12,33,43,.6);color:#99b7c0;font-size:9px}.toggle-action b{font-size:8px;color:#6d8591}.toggle-action.active{border-color:#70c4d3;color:var(--cyan)}.toggle-action.active b{color:var(--cyan)}.mini-select{display:flex;align-items:center;gap:6px;color:#7fa4b1;font-size:9px}.mini-select select{padding:8px 5px;max-width:85px}.mini-select input{width:44px}.manual-box{border-top:1px solid rgba(82,146,159,.19);margin-top:11px}.manual-box summary{cursor:pointer;list-style:none;padding:11px 0 1px;color:#b9dae1;font-size:9px;letter-spacing:.07em}.manual-box summary::-webkit-details-marker{display:none}.manual-box summary>span{color:var(--accent);font-size:14px}.manual-box summary b{float:right;color:#7f9ba6;font-weight:400;font-size:8px}.joints-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px 20px;margin:15px 0}.joints-grid label{font-size:9px;letter-spacing:.04em;color:#91a9b3}.joints-grid label strong{float:right;color:var(--cyan)}.joints-grid input{display:block;margin-top:13px;width:100%;height:3px}.override-note{font-size:8px;line-height:1.5;color:#647f8a;margin-bottom:4px}.edge-id{position:absolute;right:23px;bottom:7px;color:#54717d;font-size:8px;letter-spacing:.16em;z-index:2}.edge-id span{color:var(--accent)}
.annotation-layer{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.annotation-lines{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.annotation-lines path{fill:none;stroke:rgba(102,212,225,.37);stroke-width:1;stroke-dasharray:2 2}.pin-label{position:absolute;white-space:nowrap;display:flex;align-items:center;gap:5px;min-height:21px;padding:4px 6px;background:rgba(8,27,40,.58);border:1px solid rgba(111,207,222,.28);backdrop-filter:blur(6px);color:#9dd7df;font-size:8px;letter-spacing:.045em;pointer-events:auto;max-width:155px}.pin-label:hover{border-color:var(--cyan);color:white}.pin-dot{display:block;width:5px;height:5px;border-radius:50%;background:#a5ebef;box-shadow:0 0 8px #71e8ff}
.loading-screen{position:absolute;inset:0;z-index:50;background:radial-gradient(ellipse at 50% 50%,#132838,#050c15 74%);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:32px;transition:opacity .8s,visibility .8s}.loading-screen.loaded{opacity:0;visibility:hidden;pointer-events:none}.load-top{font:800 27px var(--display);letter-spacing:.12em}.load-top span{color:var(--cyan)}.load-center{display:flex;flex-direction:column;align-items:center;gap:13px;min-width:320px}.load-center strong{font-size:12px;letter-spacing:.16em}.load-center>span,.loading-screen small{font-size:9px;color:#749eac;letter-spacing:.14em}.loader-ring{width:92px;height:92px;border:2px solid rgba(88,183,212,.17);border-top-color:#8eeaf0;border-radius:50%;animation:spin 1.25s linear infinite;margin-bottom:16px;box-shadow:0 0 45px rgba(74,182,213,.15)}.load-line{width:260px;height:2px;background:#254451;overflow:hidden;margin-top:11px}.load-line i{display:block;width:60%;height:100%;background:#86dbe4;animation:load 1.5s ease-in-out infinite}.error-screen{max-width:620px;text-align:center;line-height:1.8}.error-screen b{font-size:16px;color:#efa358}.error-screen p{color:#bad5e2}.error-screen small{color:#8eacb9}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media(max-width:1480px){.left-panel{left:16px;width:223px}.right-panel{right:16px;width:210px}.control-deck{width:calc(100% - 490px);min-width:490px}.deck-controls{flex-wrap:wrap}.secondary-controls{width:100%;justify-content:flex-end}.left-panel,.right-panel{top:124px}}
@media(max-width:1120px){.sim-shell{min-height:700px}.left-panel{top:118px;width:203px;left:12px}.right-panel{top:118px;width:182px;right:12px}.header-glass{padding:18px 18px 12px}.right-panel .radial-gauge{width:130px;height:130px}.gauge-inner strong{font-size:46px}.control-deck{width:calc(100% - 420px);min-width:390px;padding:12px}.milestones{font-size:7px}.action-btn{padding:0 8px}.action-btn .action-name{display:none}.action-btn[data-action=play] .action-name{display:inline}.left-panel,.right-panel{max-height:calc(100dvh - 325px)}.right-panel .panel-title,.left-panel .panel-title{font-size:19px}}
@media(max-width:760px){.sim-shell{min-height:680px;height:100dvh}.header-glass{padding:14px 14px;min-height:80px}.brand-block h1{font-size:29px;margin:6px 0}.eyebrow{font-size:8px}.sid,.subtitle,.header-meta,.header-status .icon-tag{display:none}.header-status{min-width:100px}.tagline{margin-top:10px}.header-status .tag{padding:7px;font-size:8px}.left-panel{left:8px;top:92px;width:calc(50% - 13px);padding:10px;max-height:165px;background:rgba(10,24,34,.78)}.right-panel{right:8px;top:92px;width:calc(50% - 13px);max-height:165px;padding:10px;background:rgba(10,24,34,.78)}.left-panel .panel-title,.right-panel .panel-title{font-size:16px;padding:6px 0}.panel-top .eyebrow{font-size:7px}.camera-grid{grid-template-columns:repeat(3,1fr);gap:3px}.tile{min-height:40px;font-size:7px}.tile span{font-size:13px}.left-panel .section-heading{margin:11px 0 7px}.mode-btn{padding:7px;font-size:8px}.left-panel .hint-text,.right-panel .readout-note{display:none}.right-panel .radial-gauge{width:85px;height:85px;margin:6px auto}.gauge-inner strong{font-size:27px}.gauge-inner .eyebrow,.gauge-inner small{font-size:6px}.readout{padding:5px 0}.readout>span{font-size:7px}.readout strong{font-size:9px}.readout .bar{display:none}.twin-telemetry{gap:3px;margin-top:6px}.twin-telemetry>div{padding:6px}.twin-telemetry strong{font-size:11px}.twin-telemetry span{font-size:6px}.control-deck{width:calc(100% - 16px);min-width:0;left:8px;transform:none;bottom:10px;padding:10px 12px;max-height:46vh}.deck-heading strong{font-size:15px}.milestones{font-size:6px;padding:8px 10px}.deck-controls{padding-top:8px;gap:8px}.transport-controls{flex:1;justify-content:space-between}.action-btn{min-height:36px;flex:1;justify-content:center;padding:0 6px}.action-btn .ico{font-size:15px}.action-btn[data-action=play] .action-name{display:none}.secondary-controls{justify-content:space-between}.volume-label{display:none}.mini-select select{padding:8px 5px}.manual-box summary b{display:none}.joints-grid{grid-template-columns:1fr 1fr;gap:13px 10px}.annotation-layer .pin-label{font-size:6px;padding:3px;opacity:.7}.pin-label .pin-caption{max-width:84px;overflow:hidden;text-overflow:ellipsis}.edge-id{display:none}.footer-gradient{height:280px}}
@media(max-width:450px){.left-panel{max-height:150px}.right-panel{max-height:150px}.top-wash{height:120px}.control-deck{max-height:44vh}.manual-box[open]{max-height:29vh;overflow-y:auto}.header-glass h1{font-size:26px}.model-suffix{display:none}.action-btn{padding:0 3px}.secondary-controls .toggle-action span{display:none}.milestones span:nth-child(even){display:none}.section-heading{font-size:8px}}
@media(prefers-reduced-motion:reduce){.loader-ring,.load-line i{animation:none}*{scroll-behavior:auto!important}}
.sim-shell.embedded{height:100%;min-height:520px}
