:root{font-family:'Inter',Arial,sans-serif;color:#d6e7eb;background:#07131d;font-synthesis:none;--panel:rgba(7,19,29,.88);--edge:rgba(78,134,158,.29);--cyan:#5ed8ed;--muted:#7e9ba7;--amber:#e9a76e;--mono:'IBM Plex Mono',monospace;--title:'Barlow Condensed','Arial Narrow',sans-serif;color-scheme:dark}
*{box-sizing:border-box}html,body,#app{height:100%;margin:0;overflow:hidden}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}#app{position:relative;min-width:320px;background:#07131d}#scene{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:none}
#app::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 58% 63% at 50% 52%,transparent 32%,rgba(0,8,16,.45) 100%);z-index:1}
.topbar,.ui-panel,.viewport-guide,.annotations,.hint,.mobile-toggle{position:absolute;z-index:4}.topbar{z-index:8;top:0;left:0;right:0;height:83px;padding:0 31px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(5,18,28,.97),rgba(6,19,29,.67));border-bottom:1px solid var(--edge)}
.brand{display:flex;align-items:center;gap:14px;min-width:270px}.brand-icon{width:45px;height:45px;border:1.5px solid var(--cyan);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;background:rgba(47,184,210,.11);font-family:var(--mono);color:var(--cyan);font-weight:700;font-size:17px}.brand strong{font-family:var(--title);font-size:23px;letter-spacing:1.8px;font-weight:800;line-height:1}.brand em{font-style:normal;color:var(--cyan)}.brand small{display:block;margin-top:6px;font:9px var(--mono);letter-spacing:1.2px;color:#698999}.top-info{display:flex;align-items:center;gap:13px;font:10px var(--mono);letter-spacing:1.1px;color:#9fb5c0}.live-dot{height:7px;width:7px;border-radius:50%;background:#66dfb7;box-shadow:0 0 12px #61e6bd}.sep{height:15px;border-left:1px solid #415663;margin:0 7px}.icon-btn{border:1px solid var(--edge);background:#122734;color:#9dcad8;border-radius:2px;width:30px;height:30px;font-weight:bold}
.ui-panel{border:1px solid var(--edge);background:var(--panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 60px #0006, inset 0 1px #ffffff0b}.left-panel{top:106px;bottom:129px;left:24px;width:311px;overflow:auto;padding:21px 19px 17px;scrollbar-color:#294b5c transparent;scrollbar-width:thin}.right-panel{top:106px;bottom:129px;right:24px;width:268px;overflow:auto;padding:18px 18px 17px;scrollbar-color:#294b5c transparent;scrollbar-width:thin}.eyebrow{font:9px var(--mono);letter-spacing:1.4px;color:#7cbdd0;display:flex;gap:9px;align-items:center}.pulse{height:5px;width:5px;background:var(--cyan);display:inline-block;box-shadow:0 0 10px var(--cyan)}.left-panel h1{font-family:var(--title);font-size:37px;line-height:.9;letter-spacing:1.25px;margin:23px 0 13px;font-weight:800;color:#e1f1f2}.left-panel h1 span{color:var(--cyan)}.tagline{font-size:10.5px;line-height:1.55;color:#8aa6b3;margin:0 0 17px}.technical-id{display:flex;flex-direction:column;border-left:2px solid var(--cyan);padding:5px 0 4px 11px;gap:6px;background:linear-gradient(90deg,#14313f60,transparent)}.technical-id span{font:8px var(--mono);letter-spacing:1px;color:#6891a2}.technical-id strong{font:12px var(--mono);color:#b5d5df;letter-spacing:1px}.info-grid{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;gap:14px}.info-grid small,.technical-id small{display:block;color:#698995;font:9px var(--mono);letter-spacing:.9px;margin-bottom:5px}.info-grid b{font:10px var(--mono);color:#c8e0e7}.panel-divider{height:1px;background:var(--edge);margin:20px 0}.section-title{color:#a8d3de;font:10px var(--mono);letter-spacing:1px;font-weight:600;display:flex;justify-content:space-between;margin:20px 0 12px}.section-title span{color:#628493;font-size:9px;letter-spacing:0}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.mode{background:#0d2635;border:1px solid #2c5161;color:#829faa;padding:11px 4px;font:10px var(--mono);letter-spacing:.2px;transition:.15s}.mode:hover,.camera-grid button:hover,.assembly-item:hover{border-color:#4fc3e4;color:#d3f4fa}.mode.active{background:#19495c;border-color:#67c6dd;color:#d3f6ff;box-shadow:inset 2px 0 var(--cyan)}
.assembly-list{display:flex;flex-direction:column;gap:3px}.assembly-item{display:flex;align-items:center;text-align:left;gap:8px;border:1px solid transparent;background:#15303b48;padding:9px 8px;color:#9bb9c5;font:9px var(--mono);letter-spacing:.4px;width:100%}.assembly-item.active{border-color:#46879f;background:#1b4556;color:#e3f7ff}.node-dot{width:7px;height:7px;border:1px solid #578ea3;transform:rotate(45deg);flex-shrink:0}.assembly-item.active .node-dot{background:var(--cyan);border-color:var(--cyan)}.a-arrow{margin-left:auto;color:#497286}.joint-controls{padding-bottom:5px}.subtle,.footnote{font:10px/1.5 var(--mono);color:#628392;margin:9px 0}.joint-row{padding:5px 0 10px;border-bottom:1px solid #1e3b49}.joint-row label{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);color:#a3bfc9;letter-spacing:.1px;margin:8px 0}.joint-row output{color:var(--cyan)}.joint-row input{width:100%}
.telemetry-list>div{padding:11px 0 13px;border-bottom:1px solid #233c4a;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.telemetry-list label{font:9px var(--mono);letter-spacing:.5px;color:#799dab}.telemetry-list strong{font:13px var(--mono);color:#e0edf2;white-space:nowrap}.meter{height:3px;background:#213d4a;grid-column:1/3;overflow:hidden}.meter i{display:block;height:100%;width:0;background:#4dd4e8;box-shadow:0 0 8px #4dd4e8;transition:width .10s}.meter.amber i{background:#dca76a;box-shadow:0 0 8px #dca76a}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.camera-grid button{border:1px solid #2c5364;background:#0d2633;color:#99b6c3;font:10px var(--mono);padding:10px 0}.wide-outline{width:100%;text-align:left;border:1px solid #2c5364;background:#0d2633;color:#9bb7c5;font:9px var(--mono);padding:12px 10px;display:flex;justify-content:space-between;margin-top:10px}.wide-outline span{color:var(--cyan)}.settings{display:flex;flex-direction:column;gap:17px}.settings label{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#8eaab7;font:9px var(--mono)}.settings select{width:108px;background:#112e3b;color:#c6e9f1;border:1px solid #345666;font:10px var(--mono);padding:6px}.settings label:has(input){display:block}.settings label output{float:right;color:var(--cyan)}.settings input{width:100%;margin-top:11px}
input[type=range]{accent-color:#69d8ea;cursor:pointer;height:10px;touch-action:pan-x}input[type=range]::-webkit-slider-runnable-track{height:4px;background:#29556a}input[type=range]::-webkit-slider-thumb{margin-top:-4px}
.viewport-guide{left:50%;top:48%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;color:#64a5b8;opacity:.42}.viewport-guide .cross{font-size:26px;font-family:var(--mono)}.viewport-guide small{display:block;font:8px var(--mono);letter-spacing:1.2px;margin-top:3px;white-space:nowrap}.bottom-panel{bottom:19px;left:24px;right:24px;min-height:91px;padding:15px 20px;display:flex;align-items:center;gap:24px;z-index:6}.transport{display:flex;gap:5px;align-items:center}.transport button{min-width:36px;height:39px;background:#102c39;border:1px solid #355968;color:#9bbed0;border-radius:2px}.transport button:hover,.transport button.active{border-color:var(--cyan);color:#e0faff}.transport .play-button{padding:0 14px;background:#25596a;color:#ddf9fb;min-width:102px;display:flex;align-items:center;justify-content:center;gap:10px;font:10px var(--mono);letter-spacing:.5px}.transport .play-button:first-letter{font-size:15px}.timeline-wrap{flex:1;min-width:130px}.timeline-top{display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.6px;color:#a8c5d0}.timeline-top strong{color:#67ddec;margin-left:9px}.timeline-top .time{white-space:nowrap;color:#75a9b9}.timeline-wrap input{width:100%;margin:16px 0 5px;display:block;height:4px}.ticks{display:flex;justify-content:space-between;gap:5px;color:#618391;font:8px var(--mono);letter-spacing:.3px}.speed-wrap{min-width:108px;width:108px}.speed-wrap label{display:flex;justify-content:space-between;color:#8babba;font:9px var(--mono)}.speed-wrap b{color:#73d7e9}.speed-wrap input{width:100%;margin-top:15px}
.annotations{inset:0;pointer-events:none;display:none}.annotations.visible{display:block}.annotation{position:absolute;pointer-events:auto;background:#081f2ee8;border:1px solid #3a839a;border-left:3px solid var(--cyan);padding:7px 12px 6px;text-align:left;min-width:105px;transform:translate(18px,-60%);box-shadow:0 4px 14px #0009;white-space:nowrap;color:#ecf8fb}.annotation .label-name{display:block;font:10px var(--mono);font-weight:700}.annotation .label-detail{display:block;font:8px var(--mono);color:#69adbd;margin-top:3px}.annotation .label-line{position:absolute;width:24px;height:1px;background:var(--cyan);top:50%;right:100%;opacity:.7}.annotation .label-dot{position:absolute;right:calc(100% + 22px);top:calc(50% - 3px);width:7px;height:7px;border:1px solid #60d7e9;border-radius:50%;box-shadow:0 0 8px #63d8e9}.annotation.active{background:#1b4c5ce8;border-color:#9beaff}.hint{bottom:132px;left:50%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:.4px;color:#729caa;pointer-events:none;text-shadow:0 2px 4px #000;white-space:nowrap}.mobile-toggle{display:none}
#loading{position:absolute;inset:0;z-index:30;background:#07131d;display:grid;align-content:center;justify-items:center;gap:20px;pointer-events:none;transition:opacity .7s,visibility .7s}#loading.hidden{opacity:0;visibility:hidden}.load-mark{font:700 61px var(--title);letter-spacing:8px;color:#e7fbff}.load-mark span{color:var(--cyan)}.load-track{width:230px;height:3px;background:#153846;overflow:hidden}.load-track i{display:block;width:43%;height:100%;background:var(--cyan);animation:load 1.1s ease-in-out infinite alternate}@keyframes load{to{transform:translateX(170%)}}#loading p{font:10px var(--mono);color:#75a3b2;letter-spacing:2px}
dialog{border:1px solid #356579;background:#091f2c;color:#d6e8ed;max-width:420px;padding:28px;box-shadow:0 0 100px #000;line-height:1.6}dialog::backdrop{background:#061019bd}dialog h2{font:600 27px var(--title);letter-spacing:2px;color:var(--cyan);margin-top:0}dialog p{font-size:12px;color:#a1bac5}dialog button{background:#1c5668;border:1px solid #63d6ed;color:#daf4f8;padding:10px 20px;font:10px var(--mono)}
@media(max-width:1300px){.left-panel{width:276px;left:14px}.right-panel{width:240px;right:14px}.bottom-panel{left:14px;right:14px}.topbar{padding:0 20px}.left-panel h1{font-size:33px}.ticks span:nth-child(2),.ticks span:nth-child(3){display:none}}
@media(max-width:990px){.left-panel{top:75px;bottom:100px;left:9px;width:249px;padding:15px}.right-panel{top:75px;bottom:100px;right:9px;width:208px;padding:14px}.topbar{height:62px}.brand-icon{width:36px;height:36px}.brand strong{font-size:19px}.brand small{display:none}.bottom-panel{bottom:8px;min-height:79px;gap:10px;padding:12px 13px}.transport .play-button{min-width:66px;padding:0 5px}.transport .play-button span{display:none}.speed-wrap{display:none}.viewport-guide small{display:none}.hint{bottom:98px}.left-panel h1{font-size:31px}}
@media(max-width:720px){.topbar{padding:0 13px;height:61px}.brand{min-width:auto}.brand strong{font-size:20px}.top-info{font-size:8px;margin-left:auto;margin-right:11px}.top-info .sep,.top-info span:last-child{display:none}.left-panel{display:none;top:68px;left:8px;bottom:102px;width:min(88vw,318px);z-index:12;box-shadow:0 5px 70px #000c}.right-panel{display:none;top:68px;right:8px;bottom:102px;width:min(70vw,240px);z-index:12}.show-panels .left-panel,.show-panels .right-panel{display:block}.show-panels .right-panel{display:none}.bottom-panel{bottom:0;left:0;right:0;border-left:0;border-right:0;min-height:92px;padding:12px 10px;gap:7px;background:#07131df5}.transport{gap:3px}.transport button{min-width:28px;height:33px;font-size:12px}.transport .play-button{min-width:35px}.timeline-top{font-size:8px}.timeline-top strong{display:none}.ticks{font-size:7px}.ticks span:not(:first-child):not(:last-child){display:none}.hint{bottom:110px;font-size:8px;max-width:90vw;overflow:hidden;text-overflow:ellipsis}.viewport-guide{top:55%}.viewport-guide .cross{font-size:18px}.mobile-toggle{display:block;bottom:108px;left:13px;z-index:16}.mobile-toggle button{border:1px solid #4d9aa9;color:#d3eef6;background:#143343d9;font:10px var(--mono);padding:9px 12px;box-shadow:0 4px 15px #000a}.annotations{display:none!important}}
@media(max-width:390px){.top-info{display:none}.brand strong{font-size:18px}.timeline-top{font-size:7px}.transport button{min-width:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(max-width:720px){.show-panels.show-settings .left-panel{display:none}.show-panels.show-settings .right-panel{display:block}}