:root{color-scheme:dark;--base:#071320;--panel:rgba(5,14,25,.92);--panelEdge:rgba(139,178,193,.16);--muted:#6f8896;--text:#d6e6eb;--cyan:#5ee4ec;--ice:#a3eaf0;--orange:#f0a86f;--mono:'DM Mono',ui-monospace,monospace;--sans:'Inter',Arial,sans-serif;--display:'Barlow Condensed','Arial Narrow',sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#060d18;font-family:var(--sans);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
#app,#viewport{width:100%;height:100%;position:absolute;inset:0}#viewport{display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 53% 49%,transparent 10%,rgba(1,8,15,.35) 76%,rgba(1,7,15,.65) 100%)}.grain{pointer-events:none;position:absolute;inset:0;opacity:.20;background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(9,21,32,.08) 4px 5px)}#hud{position:absolute;inset:0;pointer-events:none}#hud>*,#component-labels button{pointer-events:auto}
.top-brand{position:absolute;left:26px;top:22px;display:flex;align-items:center;gap:13px;height:50px}.brand-mark{width:55px;height:54px;border:1px solid rgba(88,226,242,.65);position:relative;display:grid;place-items:center;clip-path:polygon(0 0,80% 0,100% 23%,100% 100%,20% 100%,0 77%);background:linear-gradient(140deg,rgba(29,124,143,.33),rgba(9,22,32,.6))}.brand-emblem{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-2px;color:#f0faf9}.brand-emblem span{color:var(--cyan)}.brand-submark{font:700 10px var(--mono);color:var(--cyan);position:absolute;bottom:4px;right:5px}.brand-text strong{display:block;font:800 21px var(--display);letter-spacing:1.2px;line-height:1}.brand-text strong span{color:var(--cyan);margin-left:4px}.brand-text small{display:block;color:#8da2ae;font:9px var(--mono);letter-spacing:1.2px;margin-top:6px}.brand-text small b{font-weight:500;color:var(--orange)}.top-separator{margin-left:18px;width:1px;height:28px;background:rgba(118,158,170,.22)}.desktop-top-tag{font:10px var(--mono);color:#879da8;letter-spacing:.3px}.blinker{font-size:9px;color:#44d5d7;margin:0 4px 0 14px;animation:blink 1.9s infinite}@keyframes blink{50%{opacity:.25}}.top-right{position:absolute;right:25px;top:40px;display:flex;align-items:center;gap:14px;color:#a1b0bc;font:10px var(--mono);letter-spacing:.55px}.live-dot{height:7px;width:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.top-divider{height:15px;width:1px;background:#365263}.top-counter{color:var(--muted)}.top-counter b{color:var(--orange);font-weight:500}
.left-panel{position:absolute;top:101px;bottom:145px;left:18px;width:315px;padding:22px 23px 12px;background:linear-gradient(145deg,rgba(7,18,30,.94),rgba(6,14,25,.9));border:1px solid var(--panelEdge);backdrop-filter:blur(18px);overflow:auto;scrollbar-width:thin;scrollbar-color:#23404b transparent}.left-panel:before,.right-panel:before{content:'';position:absolute;left:-1px;top:18px;width:2px;height:48px;background:var(--cyan);box-shadow:0 0 11px rgba(38,199,208,.35)}.section-overline,.section-heading{font:10px var(--mono);letter-spacing:1.25px;color:#7f9ba7}.section-overline{color:var(--cyan)}.vehicle-id{color:#9fb1b7;font:10px var(--mono);letter-spacing:.28px;display:flex;justify-content:space-between;margin-top:19px}.vehicle-id span{color:var(--orange);font-size:9px}.left-panel h1{margin:8px 0 2px;font:800 clamp(58px,5.6vw,88px)/.79 var(--display);letter-spacing:-.5px;color:#ecf4f2}.left-panel h1 em{color:var(--cyan);font-style:normal;letter-spacing:5px;font-weight:800}.title-dash{font-weight:400;color:#7b9b9d}.title-underline{width:70px;height:2px;background:var(--cyan);margin:15px 0}.left-panel h2{font:600 16px/1.12 var(--display);letter-spacing:1.15px;color:#bacdd2;margin:0}.intro{font:11px/1.68 var(--sans);color:#8ca0a9;margin:13px 0 14px}.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;border:1px solid #203843;background:#203843;margin:14px 0 22px}.spec-grid>div{background:#0c1a27;padding:11px 10px;min-width:0}.spec-grid small{display:block;font:9px var(--mono);color:#758995;letter-spacing:.35px}.spec-grid strong{display:block;font:600 11px var(--display);letter-spacing:.55px;margin-top:6px;color:#cedfe1}.section-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(101,148,158,.22);padding-bottom:9px;margin-bottom:11px}.section-tick{font-size:9px;letter-spacing:.35px;color:#4dc5ce}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:19px}.mode{display:flex;gap:8px;align-items:center;background:rgba(13,31,43,.55);border:1px solid #27404d;color:#8ea6b2;font:500 11px var(--display);letter-spacing:.8px;padding:10px 9px;transition:.18s}.mode:hover,.mode.active{background:rgba(31,123,136,.18);border-color:#47b9c5;color:#d1f5f2}.mode-glyph{font-size:16px;color:#7198a1}.mode.active .mode-glyph{color:var(--cyan)}.joint-head{margin-top:15px}.joint-row{margin:0 0 12px}.joint-copy{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font:10px var(--display);font-weight:600;letter-spacing:.7px;color:#91a5ac}.joint-copy output{font:10px var(--mono);color:var(--cyan)}.joint-row input{width:100%;height:3px;display:block;appearance:none;background:linear-gradient(to right,#3bc8d0 var(--fill,0%),#2c4550 var(--fill,0%));outline:none;border:0;cursor:default}.manual-mode .joint-row input{cursor:pointer}.joint-row input::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border:1px solid #77d5e0;background:#a4f2f3;box-shadow:0 0 8px #47c8d0;opacity:.6}.manual-mode .joint-row input::-webkit-slider-thumb{width:12px;height:12px;opacity:1}.joint-row input:disabled{opacity:.72}.bottom-note{display:flex;gap:8px;color:#667d8b;font:9px/1.52 var(--mono);border-top:1px solid #253943;padding-top:11px;margin-top:14px}.note-sigil{color:#bb9d75;font-size:17px}
.right-panel{position:absolute;right:18px;top:99px;bottom:145px;width:273px;padding:19px 16px;background:linear-gradient(145deg,rgba(7,18,30,.93),rgba(6,16,26,.90));border:1px solid var(--panelEdge);backdrop-filter:blur(18px);overflow:auto;scrollbar-width:thin}.tech-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #203844;padding-bottom:13px}.tech-header>span{font:600 11px var(--display);letter-spacing:1.1px}.tech-header i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6be4d7;box-shadow:0 0 12px #5be8dc;margin-right:6px}.tech-header small{color:var(--orange);font:9px var(--mono)}.status-box{margin:16px 0 17px;background:rgba(22,61,70,.25);border:1px solid #284a53;padding:13px}.status-box small{font:9px var(--mono);letter-spacing:.5px;color:#8babb0;display:block;margin-bottom:9px}.status-box strong{color:#e1f4f1;font:600 15px var(--display);letter-spacing:1.2px}.thin-progress{height:3px;background:#26414b;margin-top:12px}.thin-progress i{display:block;width:0;height:100%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.readout{display:flex;justify-content:space-between;border-bottom:1px solid rgba(117,151,167,.15);padding:9px 0}.readout small{font:9px var(--mono);color:#7e98a3}.readout b{display:block;font:700 19px var(--display);letter-spacing:1px;color:#e2eff1;margin-top:3px}.readout-code{font:9px var(--mono);color:#52737a;margin-top:4px}.camera-heading,.quality-heading{margin-top:25px}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.camera-button{font:10px var(--display);letter-spacing:.45px;color:#91a4b0;background:#0e2030;border:1px solid #284251;height:31px}.camera-button.selected,.camera-button:hover{color:#d8f6f4;border-color:#62bac5;background:#16404a}.orbit-button{background:transparent;border:1px solid #28414c;width:100%;text-align:left;margin-top:9px;padding:8px 10px;color:var(--cyan);font:10px var(--display);letter-spacing:.5px}.orbit-button span{float:right;font:9px var(--mono);color:#687e8b}.settings-inline{display:flex;align-items:center;justify-content:space-between;margin:13px 0}.settings-inline>small{font:9px var(--mono);color:#80919d}.quality-control{display:flex;gap:3px}.quality-control button,.small-switch{background:#0e2632;border:1px solid #23424e;color:#9aafb9;font:9px var(--mono);padding:6px}.quality-control button.selected{color:#0c2529;background:var(--cyan);border-color:var(--cyan)}.small-switch{min-width:60px}.small-switch.audio-on{color:var(--cyan)}.export-button{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(36,75,86,.25);color:#afdee0;border:1px solid #385c68;padding:10px 7px;margin-top:15px;font:10px var(--display);letter-spacing:.6px}.export-button:hover{border-color:var(--cyan)}
.crosshair{position:absolute;top:112px;color:#6ee3e4;opacity:.46;font:23px var(--mono)}.crosshair-tl{left:354px}.crosshair-tr{right:310px}.screen-coordinate{position:absolute;top:109px;left:50%;transform:translateX(-50%);font:10px var(--mono);color:#6c8b94;letter-spacing:.3px}.screen-coordinate span{color:var(--cyan)}.viewport-caption{position:absolute;bottom:176px;left:360px;display:flex;gap:10px;align-items:center}.caption-bar{background:var(--orange);width:3px;height:32px}.viewport-caption b{display:block;font:700 13px var(--display);letter-spacing:1.15px}.viewport-caption small{display:block;font:9px var(--mono);margin-top:5px;color:#7698a4}.hint-controls{position:absolute;right:310px;bottom:175px;display:flex;align-items:center;gap:7px;font:9px var(--mono);color:#86a2ad}.hint-controls i{font-style:normal;color:#5da4ad}.mouse-icon{border:1px solid #628894;border-radius:9px;padding:3px 4px;font-size:12px;color:var(--cyan)}
.timeline-panel{position:absolute;left:18px;right:18px;bottom:15px;height:120px;background:linear-gradient(100deg,rgba(5,15,25,.97),rgba(7,20,31,.94));border:1px solid #23424e;padding:14px 20px;box-shadow:0 14px 48px rgba(0,0,0,.35);backdrop-filter:blur(24px)}.timeline-panel:before{content:'';display:block;width:98px;height:2px;position:absolute;top:-1px;left:0;background:var(--cyan)}.timeline-top{display:flex;justify-content:space-between}.timeline-identity{display:flex;gap:13px;align-items:center}.sequence-number{font:800 31px var(--display);line-height:1;color:var(--orange)}.timeline-identity b{display:block;font:700 14px var(--display);letter-spacing:1.6px}.timeline-identity small{display:block;font:9px var(--mono);margin-top:2px;color:#728c99;letter-spacing:.55px}.timeline-identity small span{color:var(--cyan)}.timeline-time{font:500 14px var(--mono);color:#e3f4ef;letter-spacing:.9px}.timeline-time em{color:#577685;margin:0 7px;font-style:normal}.progress-rail{margin:8px 1px 9px;display:flex;align-items:center;gap:12px;color:#7194a0;font:9px var(--mono)}.progress-rail input{appearance:none;flex:1;height:3px;background:linear-gradient(to right,#5dd6df var(--fill,0%),#33505b var(--fill,0%));outline:none;cursor:pointer}.progress-rail input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#a2f1f2;border:2px solid #178a9c;box-shadow:0 0 9px #5fe6ec;border-radius:1px}.progress-rail .end-label{color:var(--cyan)}.transport-row{display:flex;align-items:center;justify-content:space-between}.transport-buttons,.transport-mid,.transport-actions,.speed-buttons{display:flex;align-items:center;gap:8px}.transport-buttons button,.transport-actions button{border:1px solid #25434f;background:#102536;color:#a8c6d0;min-width:32px;height:30px;display:flex;align-items:center;justify-content:center;gap:7px}.transport-buttons button:hover,.transport-actions button:hover{color:var(--cyan);border-color:var(--cyan)}.transport-buttons .play-button{background:var(--cyan);border-color:var(--cyan);color:#072732;padding:0 17px;font:700 11px var(--display);letter-spacing:1.4px}.transport-buttons .play-button svg{fill:#072732}.loop-button{font-size:16px!important;padding:0 12px}.loop-button span{font:10px var(--display)}.loop-button:not(.active){opacity:.48}.transport-mid>span{color:#8496a1;font:10px var(--mono);margin-right:8px}.speed-buttons button{background:transparent;color:#819ba6;border:0;padding:6px 8px;font:10px var(--mono)}.speed-buttons button.selected{background:#173e4a;color:var(--cyan)}.transport-actions button{padding:0 12px;font:10px var(--display);letter-spacing:.55px}.toast{position:absolute;top:80px;left:50%;transform:translate(-50%,-14px);padding:12px 18px;background:rgba(9,31,41,.95);border:1px solid #348b92;color:#c5f3ed;font:11px var(--mono);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20}.toast.visible{opacity:1;transform:translate(-50%,0)}
#component-labels{position:absolute;inset:0;pointer-events:none}.part-label{position:absolute;transform:translate(-50%,-160%);padding:6px 8px;min-width:110px;background:rgba(3,19,29,.91);border:1px solid #467889;color:#d0e1e7;font:9px var(--mono);letter-spacing:.1px;display:flex;gap:7px;align-items:center;white-space:nowrap;box-shadow:0 4px 20px #0005;z-index:3}.part-label:after{content:'';position:absolute;left:50%;top:100%;height:17px;width:1px;background:#5dbac5}.label-pip{height:5px;width:5px;background:#65e4ea;box-shadow:0 0 8px #74eff2}.label-index{color:var(--cyan)}.part-label.selected{border-color:var(--orange);color:#fff}.part-label.selected .label-pip{background:var(--orange)}
#status-layer{position:absolute;inset:0;background:rgba(5,13,23,.98);z-index:50;display:grid;place-items:center;transition:opacity .5s}#status-layer.hidden{opacity:0;pointer-events:none}.loader{font:11px var(--mono);letter-spacing:1.2px;text-align:center;color:#b5dfe2;display:flex;flex-direction:column;align-items:center;gap:16px}.loader-icon{font:800 58px var(--display);color:#e0ffff;letter-spacing:-3px}.loader-icon span{color:var(--cyan)}.loading-bar{height:2px;width:200px;background:#183440;overflow:hidden}.loading-bar i{display:block;height:100%;width:40%;background:var(--cyan);animation:loading 1.5s ease-in-out infinite alternate}.loader small{font:10px var(--mono);color:#708d9b;letter-spacing:0}@keyframes loading{from{transform:translateX(-140%)}to{transform:translateX(350%)}}
@media(max-height:880px){.left-panel{padding-top:14px;padding-bottom:14px}.left-panel h1{font-size:66px}.intro{line-height:1.48}.spec-grid{margin:10px 0 13px}.left-panel .joint-row{margin:0 0 8px}.right-panel{padding-top:12px}.readout{padding:6px 0}.camera-heading,.quality-heading{margin-top:14px}}
@media(max-width:1250px){.top-brand .desktop-top-tag,.top-separator,.top-right .top-divider,.top-right>span:nth-of-type(2){display:none}.left-panel{width:282px;padding:17px}.right-panel{width:230px}.crosshair-tl{left:310px}.crosshair-tr{right:245px}.viewport-caption{left:310px}.hint-controls{right:242px}.transport-mid>span{display:none}}
@media(max-width:1040px){.right-panel{display:none}.top-right{top:46px}.crosshair-tr{right:23px}.hint-controls{right:34px}.viewport-caption{left:314px}.top-brand{left:20px}.left-panel{bottom:157px}}
@media(max-width:760px){.top-brand{left:12px;top:10px;transform:scale(.8);transform-origin:left top}.top-right{top:24px;right:12px;font-size:9px}.top-right>span:nth-of-type(1),.top-right>span:nth-of-type(3){display:none}.left-panel{top:auto;bottom:156px;height:173px;left:9px;width:min(275px,65vw);overflow:auto;padding:10px 13px;background:rgba(5,15,25,.9)}.left-panel h1{font-size:42px;margin:5px 0}.left-panel h1 br{display:none}.left-panel h1 em{margin-left:8px}.vehicle-id{margin-top:6px;font-size:9px}.section-overline{font-size:9px}.left-panel .title-underline,.left-panel .intro,.left-panel h2,.left-panel .spec-grid,.left-panel .bottom-note,.left-panel .joint-head,.left-panel .joint-controls{display:none}.mode-grid{margin-bottom:0;gap:4px}.mode{font-size:10px;padding:7px}.section-heading{margin:3px 0 8px}.screen-coordinate,.crosshair,.hint-controls,.viewport-caption{display:none}.timeline-panel{bottom:7px;left:7px;right:7px;height:139px;padding:10px}.timeline-identity b{font-size:11px}.timeline-identity small{font-size:7px}.timeline-identity{gap:7px}.sequence-number{font-size:22px}.timeline-time{font-size:10px}.transport-row{flex-wrap:wrap;gap:9px}.transport-mid{order:3;width:100%;justify-content:center}.speed-buttons button{padding:3px 8px}.transport-actions button{padding:0 6px}.transport-actions button span{display:none}.part-label{font-size:7px;min-width:0;padding:4px}.part-label .label-index{display:none}}
@media(max-height:610px){.top-brand{top:8px}.left-panel{top:78px;bottom:150px}.right-panel{top:78px;bottom:150px}.timeline-panel{height:120px}}

.audio-volume{margin-top:8px}.audio-volume input{width:108px;height:3px;appearance:none;background:#2a5361;accent-color:#63d9e1}.audio-volume input::-webkit-slider-thumb{appearance:none;width:9px;height:9px;background:#81e8ec;border-radius:50%;box-shadow:0 0 7px #3ab3bb}