
:root{color-scheme:dark;--paper:#e2f2f4;--dim:#819bab;--deep:#061019;--panel:rgba(7,20,31,.89);--rule:rgba(111,189,214,.21);--cyan:#74d9f2;--orange:#ebac57;--mono:'DM Mono','Consolas',monospace;--cond:'Barlow Condensed','Arial Narrow',sans-serif;--ui:'Manrope',system-ui,sans-serif}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--deep)}button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}#app{font-family:var(--ui);position:relative}#app .forge-stage{position:absolute;inset:0}#app canvas{display:block;width:100%;height:100%;touch-action:none}#app:before{content:'';pointer-events:none;position:absolute;inset:0;z-index:2;background:radial-gradient(ellipse at 49% 55%,transparent 30%,rgba(3,8,14,.24) 80%,rgba(2,5,10,.60) 100%)}
.forge-ui{position:absolute;inset:0;z-index:3;color:var(--paper);pointer-events:none;overflow:hidden}.forge-ui button,.forge-ui input,.forge-ui select,.forge-ui .annotation-layer{pointer-events:auto}.hud-top{position:absolute;left:0;right:0;top:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,2.5vw,50px);border-bottom:1px solid rgba(100,199,226,.16);background:linear-gradient(#07111de8,#07111d78);gap:15px}.brand{display:flex;align-items:center;gap:14px;font-family:var(--cond);font-size:18px;letter-spacing:2px;line-height:1.05}.brand strong{font-weight:700}.brand-icon{font-family:var(--ui);font-size:33px;color:#f5b362;font-weight:400}.brand em{display:block;margin-top:7px;font:9px var(--mono);font-style:normal;letter-spacing:1.3px;color:#698da2}.hud-top-center{display:flex;align-items:center;gap:12px;color:#7594a6;font:10px var(--mono);letter-spacing:1px}.signal-light,.blink-led{display:inline-block;width:6px;height:6px;border-radius:50%;background:#6bdbcd;box-shadow:0 0 12px #6bdbcd}.thin-rule{height:13px;border-left:1px solid var(--rule)}.top-actions{display:flex;gap:9px}.top-actions button{color:#b5d5e1;background:#102637;border:1px solid #234354;border-radius:4px;min-height:38px;padding:0 12px;font:10px var(--mono)}.top-actions button:hover{border-color:var(--cyan)}
.identity{position:absolute;top:110px;left:clamp(22px,2.5vw,50px)}.eyebrow{font:10px var(--mono);letter-spacing:1.15px;color:#80a4b3;display:flex;align-items:center;gap:9px}.amber-dot{width:5px;height:5px;background:var(--orange);display:inline-block}.identity h1{margin:12px 0 3px;font:800 clamp(46px,4.1vw,79px)/.94 var(--cond);letter-spacing:1px;text-shadow:0 3px 25px #0009}.identity h1 b{font-weight:400;color:var(--orange)}.identity-sub{font:10px var(--mono);letter-spacing:1.4px;color:#a3b9c3}.slash{color:var(--orange);padding:0 7px}.status-line{display:flex;gap:9px;align-items:center;font:10px var(--mono);letter-spacing:1px;margin-top:22px;color:#7898a8}.state-label{color:#78dfd0}.status-separator{color:#f3bc6f}.glass{background:var(--panel);border:1px solid rgba(126,194,216,.19);box-shadow:0 18px 60px #0209104d,inset 1px 1px 0 #9adfff0b;backdrop-filter:blur(17px);border-radius:5px}.left-panel{position:absolute;left:clamp(20px,2.5vw,48px);top:43%;width:282px;padding:21px 20px 14px}.panel-cap{display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);letter-spacing:1.4px;color:#7d9fae;border-bottom:1px solid var(--rule);padding-bottom:15px}.metric{display:flex;flex-direction:column;gap:11px;padding:18px 0 14px;border-bottom:1px solid #29425254}.metric span{font:9px var(--mono);color:#8d9da9;letter-spacing:.7px}.metric strong{font:600 29px/.9 var(--cond);color:#e3e9e5;letter-spacing:.5px}.metric strong small{font:14px var(--cond);color:#80a5b4;margin-left:4px}.main-metric strong{font-size:47px;color:var(--orange)}.micro-track{height:3px;background:#163542;margin-top:5px}.micro-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3da6b7,#efae55);box-shadow:0 0 9px #efaa5588}.two-metrics{display:grid;grid-template-columns:1fr 1fr;column-gap:15px}.two-metrics .metric{padding-top:21px;padding-bottom:21px}.two-metrics .metric strong{font-size:23px}.panel-footer{display:flex;flex-direction:column;gap:9px;margin-top:16px;font:9px var(--mono);color:#698f9e}.panel-footer span:first-child{color:#5cbdad}
.right-panel{position:absolute;right:clamp(20px,2.5vw,48px);top:139px;width:276px;padding:20px}.small-tag{color:var(--orange);font-size:8px}.selected-head{display:flex;align-items:center;gap:10px;margin-top:21px}.selected-icon{width:43px;height:43px;display:grid;place-items:center;border:1px solid #3f92aa;background:#14364a;color:var(--cyan);border-radius:3px;font-size:24px}.selected-head span{font:9px var(--mono);color:#76a7b9;letter-spacing:1px;display:block;margin-bottom:5px}.selected-head strong{font:600 21px/.98 var(--cond);letter-spacing:.5px;display:block}.right-panel p{font:11px/1.65 var(--ui);color:#99aebb;margin:20px 0 24px}.joint-slider.disabled{opacity:.30;pointer-events:none}.slider-top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a6c2cd;font:9px var(--mono);letter-spacing:.4px}.slider-top output{color:var(--orange);font:12px var(--mono)}input[type=range]{-webkit-appearance:none;appearance:none;cursor:pointer;border:0;width:100%;height:4px;background:#28495a;border-radius:5px;accent-color:var(--orange);margin:16px 0 13px;outline-offset:8px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border:2px solid #f6b765;background:#0b1b23;border-radius:50%;box-shadow:0 0 0 5px #e6a25020}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:2px solid #f6b765;background:#0b1b23;border-radius:50%}.joint-end{display:flex;justify-content:space-between;color:#6e94a3;font:9px var(--mono)}.focus-btn{margin:20px 0 29px;width:100%;height:41px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:#183447;border:1px solid #34627a;color:#c4e8f3;font:10px var(--mono);letter-spacing:.3px}.focus-btn:hover,.mode:hover{border-color:var(--cyan);background:#1b455b}.sub-cap{padding-bottom:13px}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0 20px}.mode{background:#101f2b;color:#7697a7;border:1px solid #284353;font:9px var(--mono);height:37px}.mode.active{color:#a7eeff;border-color:#46a8c7;background:#153b4e}.view-line{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #24404c6e;padding:13px 0}.view-line label{font:9px var(--mono);color:#819ba9}.view-line select,.play-speed select{background:#122936;color:#c0d9e2;border:1px solid #315062;padding:6px 7px;font:10px var(--mono);max-width:142px}.view-line button{background:transparent;color:#97aebe;border:1px solid #345267;padding:7px 10px;font:9px var(--mono)}.view-line button.active{color:#64e0cd;border-color:#54a79d}
.bottom-bar{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);width:min(1092px,calc(100% - 380px));height:111px;display:flex;align-items:center;gap:22px;padding:19px 22px;border-color:#356177a1;background:rgba(8,21,33,.93)}.transport-row{display:flex;align-items:center;gap:4px;flex-shrink:0}.transport{width:31px;height:35px;border:0;background:transparent;color:#b1cbd6;font:16px var(--mono)}.transport:hover{color:var(--orange)}.transport-play{width:42px;height:42px;border-radius:50%;background:#ecb25e;color:#0a1d27;margin:0 7px}.transport-play:hover{background:#ffcc75;color:#08141d}.loop-toggle{display:flex;align-items:center;gap:6px;font:9px var(--mono);color:#92a9b5;margin:0 6px;cursor:pointer;white-space:nowrap}.loop-toggle input{accent-color:#dfae6b}.timeline-wrap{min-width:110px;flex:1}.timeline-header{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:1px;color:#7e9eaa}.timeline-header span:last-child{color:#e1f2ed;font-size:12px}.timeline-header em{color:#7493a2;font-style:normal}#timeline{margin:20px 0 8px;background:linear-gradient(to right,#eeaf5c var(--pct,0%),#24495a var(--pct,0%))}.timeline-labels{display:flex;align-items:center;justify-content:space-between;gap:4px;font:8px var(--mono);letter-spacing:.5px;color:#7091a1}.play-speed{display:flex;flex-direction:column;gap:12px;font:9px var(--mono);color:#93b0be}.play-speed select{min-width:75px}.floor-mark{position:absolute;bottom:8px;font:9px var(--mono);color:#4a7389;letter-spacing:1.2px}.floor-mark span{color:#b08648}.floor-left{left:3%}.floor-right{right:3%}.viewer-hint{position:absolute;top:89px;left:50%;transform:translateX(-50%);white-space:nowrap;font:9px var(--mono);color:#5a8398;letter-spacing:.9px}.viewer-hint span{color:var(--orange);padding:0 4px}
.annotation-layer{position:absolute;inset:0;pointer-events:none!important}.annotation-layer .point-tag{position:absolute;top:0;left:0;pointer-events:auto;border:1px solid rgba(66,181,209,.8);color:#bdedfc;background:#09212cc9;padding:7px 11px;font:10px var(--mono);letter-spacing:1px;white-space:nowrap;transition:background .2s,opacity .2s,transform .12s;transform:translate3d(-9999px,-9999px,0);box-shadow:0 4px 18px #0006}.annotation-layer .point-tag span{color:#a1d5e5;padding-left:8px}.annotation-layer .point-tag:hover{background:#226179;border-color:#b8f3ff}.leader-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.toast{position:absolute;left:50%;top:88px;transform:translateX(-50%) translateY(-12px);border:1px solid #2b6575;background:#0e2733;color:#bde5ec;padding:10px 14px;opacity:0;transition:opacity .2s,transform .2s;font:11px var(--mono)}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}.loading{position:absolute;inset:0;background:#06111c;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:12;transition:opacity .6s}.loading.done{opacity:0;pointer-events:none}.load-title{font:600 35px var(--cond);letter-spacing:2px}.load-title b{color:var(--orange);font-weight:400}.load-track{height:3px;width:230px;background:#1a3642;margin:28px 0 15px;overflow:hidden}.load-track div{height:100%;width:45%;background:#78d6e6;animation:loading 1.2s infinite alternate}@keyframes loading{from{transform:translateX(-100%)}to{transform:translateX(320%)}}.loading p{font:10px var(--mono);letter-spacing:1.4px;color:#7194a6}
@media(max-width:1240px){.bottom-bar{width:calc(100% - 340px);gap:10px;left:auto;right:20px;transform:none;padding:14px}.left-panel{width:250px;left:18px}.right-panel{width:246px;right:18px}.left-panel{top:40%}.bottom-bar{bottom:18px}.transport{width:26px}.timeline-labels span:nth-child(2),.timeline-labels span:nth-child(4){display:none}}
@media(max-width:920px){.identity{top:92px}.identity h1{font-size:59px}.left-panel{top:auto;bottom:160px;width:222px;padding:13px}.right-panel{top:auto;bottom:160px;width:225px;padding:13px}.right-panel p{margin:12px 0}.right-panel .selected-head{margin-top:13px}.right-panel .focus-btn{margin:12px 0}.right-panel .mode-grid{margin:12px 0}.right-panel .view-line{padding:8px 0}.two-metrics .metric{padding:12px 0}.left-panel .main-metric{padding:12px 0}.left-panel .main-metric strong{font-size:35px}.left-panel .panel-footer{display:none}.bottom-bar{width:calc(100% - 36px);left:18px;right:18px;bottom:25px;height:111px}.floor-mark{display:none}.hud-top-center{display:none}}
@media(max-width:630px){.hud-top{height:62px;padding:0 15px}.brand{font-size:14px;letter-spacing:1px;gap:7px}.brand-icon{font-size:27px}.brand em{font-size:7px}.top-actions button{padding:0 9px;font-size:12px}.desktop-only{display:none!important}.identity{left:17px;top:78px}.eyebrow{font-size:8px;letter-spacing:.4px}.identity h1{font-size:46px;margin:8px 0 6px}.identity-sub{font-size:8px;max-width:250px;line-height:1.6}.status-line{margin-top:12px;font-size:8px}.viewer-hint{top:205px;font-size:8px;max-width:calc(100% - 30px);text-align:center;white-space:normal;line-height:1.6}.left-panel{left:10px;top:auto;bottom:176px;width:172px;padding:11px 10px 6px}.left-panel .panel-cap{font-size:8px;padding-bottom:8px}.metric{gap:4px;padding:9px 0}.metric span{font-size:7px}.main-metric strong{font-size:32px!important}.two-metrics{gap:6px}.two-metrics .metric{padding:8px 0}.two-metrics .metric strong{font-size:20px}.right-panel{right:10px;top:auto;bottom:176px;width:169px;padding:12px 10px 5px}.right-panel .panel-cap{font-size:8px;padding-bottom:7px}.selected-icon{display:none}.selected-head strong{font-size:17px}.selected-head span{font-size:7px}.right-panel p{font-size:9px;line-height:1.4;margin:8px 0}.slider-top{font-size:8px}.slider-top output{font-size:9px}.focus-btn{font-size:8px;height:29px;padding:0 7px;margin:8px 0!important}.mode-grid{gap:4px;margin:8px 0!important}.mode{height:29px;font-size:7px}.view-line{padding:7px 0}.view-line label{font-size:8px}.view-line select{font-size:8px;max-width:94px}.view-line button{font-size:8px}.bottom-bar{bottom:9px;left:9px;right:9px;width:calc(100% - 18px);height:157px;display:grid;grid-template-columns:1fr auto;grid-template-rows:42px 1fr;gap:7px 9px;padding:11px}.transport-row{grid-column:1;grid-row:1}.transport{width:30px;height:33px}.transport-play{height:34px;width:34px}.transport-stepback,.transport-step{display:none}.loop-toggle{font-size:7px}.timeline-wrap{grid-column:1/3;grid-row:2;align-self:start}.timeline-labels{font-size:7px}.play-speed{grid-column:2;grid-row:1;gap:2px;align-self:start}.play-speed select{font-size:9px;padding:5px;min-width:68px}.play-speed>span{display:none}.annotation-layer .point-tag{font-size:8px;padding:5px}.annotation-layer .point-tag span{display:none}}
@media(max-width:410px){.left-panel{width:156px}.right-panel{width:156px}.identity h1{font-size:42px}.transport{width:26px}.loop-toggle{margin-left:2px}}
@media(max-height:700px) and (min-width:631px){.left-panel{top:35%;padding:12px}.right-panel{top:85px;padding:12px}.right-panel p{margin:10px 0}.right-panel .focus-btn{margin:10px 0}.right-panel .mode-grid{margin:8px 0}.right-panel .view-line{padding:7px 0}.two-metrics .metric{padding:8px 0}.bottom-bar{bottom:15px;height:89px}.identity{top:87px}.identity h1{font-size:48px}}

.forge-mounted{position:relative!important;overflow:hidden;min-height:360px}.view-line.volume input{width:85px;margin:0;height:3px}.view-line:has(#cameraSelect) select{max-width:110px}.view-line:has(#cameraSelect) button{font-size:8px;padding:5px}.right-panel .volume{padding-bottom:0}@media(max-width:630px){.view-line:has(#cameraSelect) select{max-width:72px;font-size:7px}.view-line:has(#cameraSelect) button{font-size:7px;padding:4px}.right-panel .volume{display:flex}}

.mobile-panels{display:none}
@media(max-width:630px){
 .mobile-panels{position:absolute;display:flex;gap:8px;bottom:172px;left:9px;right:9px;justify-content:space-between;pointer-events:auto}
 .mobile-panels button{background:#0c2434df;color:#addbe5;border:1px solid #356d83;border-radius:3px;padding:7px 10px;font:9px var(--mono);letter-spacing:.3px}
 .mobile-panels button:hover{background:#194253}
 .left-panel,.right-panel{opacity:0;visibility:hidden;transform:translateY(13px);pointer-events:none;transition:opacity .2s,transform .2s,visibility .2s;bottom:211px;width:min(270px,calc(100vw - 20px))}
 .forge-ui.mobile-telemetry .left-panel,.forge-ui.mobile-inspect .right-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
 .left-panel .two-metrics .metric strong{font-size:24px}.right-panel .mode{font-size:9px}.view-line:has(#cameraSelect) select{max-width:120px}
 .mobile-panels button:active{color:#ffbd67}
}
