:root{--bg:#08111b;--panel:rgba(8,18,30,.86);--panel2:#101f2b;--cyan:#78ecf4;--text:#dbe8ec;--muted:#78919d;--border:rgba(118,201,219,.19);--orange:#ee9b6e;font-family:Inter,'Segoe UI',Roboto,Arial,sans-serif;color:var(--text);font-synthesis:none}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}#viewport{position:absolute;inset:0;touch-action:none}#viewport canvas{width:100%;height:100%;display:block;touch-action:none}#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}#interface{position:absolute;inset:0;pointer-events:none}#interface>*{pointer-events:auto}.ui-panel{position:absolute;background:linear-gradient(145deg,rgba(6,20,33,.94),rgba(11,22,33,.86));border:1px solid var(--border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 40px #030b1488;border-radius:10px}.left{left:22px;top:24px;width:310px;max-height:calc(100% - 177px);overflow:auto;padding:19px 20px;scrollbar-width:thin}.right{right:22px;top:24px;width:252px;max-height:calc(100% - 177px);overflow:auto;padding:18px 19px;scrollbar-width:thin}.eyebrow{font-size:10px;letter-spacing:.26em;color:var(--cyan);font-weight:800;text-transform:uppercase}.brand{font-size:22px;letter-spacing:.07em;font-weight:800;margin:10px 0 3px}.brand em{font-style:normal;font-weight:300;color:var(--cyan)}.subtitle{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:17px}.rule{height:1px;background:linear-gradient(90deg,var(--border),transparent);margin:16px 0}h3{font-size:10px;color:#a7c2cc;letter-spacing:.16em;text-transform:uppercase;margin:13px 0 9px}.metadata{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:11px;color:var(--muted)}.metadata strong{font-weight:600;color:#d2e8eb}.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.btn{border:1px solid rgba(104,174,187,.22);background:rgba(21,43,53,.65);color:#a6bfcc;padding:9px 10px;border-radius:5px;font-size:10px;font-weight:700;letter-spacing:.07em;transition:background .16s,border-color .16s;color-scheme:dark}.btn:hover{background:#1d4551;color:#f1ffff}.btn.active{color:#061b21;background:var(--cyan);border-color:var(--cyan)}.btn.accent{background:#143b42;color:#8bf6ff;border-color:#3a8491}.btn.small{padding:7px 8px;font-size:10px}.camera-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.metric{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(125,191,211,.10);padding:9px 0;gap:14px}.metric-label{font-size:11px;color:#96aab3}.metric-value{font-size:12px;font-family:Consolas,'SFMono-Regular',monospace;color:#dcf8fa;font-variant-numeric:tabular-nums}.metric-value.hot{color:var(--cyan)}.meter{height:3px;background:#1c333d;margin-top:5px;border-radius:6px;overflow:hidden}.meter>div{height:100%;width:0%;background:linear-gradient(90deg,#347e94,var(--cyan));transition:width .06s}.data-card{margin:12px 0;border:1px solid rgba(97,166,176,.14);padding:10px 11px;border-radius:6px;background:rgba(20,48,59,.19)}.detail{font-size:10px;color:var(--muted);line-height:1.7}.selected{font-size:13px;color:var(--cyan);margin-bottom:5px;font-weight:700}.bottom{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:min(930px,calc(100% - 52px));padding:14px 18px}.timeline-row{display:flex;gap:15px;align-items:center}.timeline-info{font-size:10px;color:var(--cyan);letter-spacing:.16em;font-weight:800;min-width:110px}.playback{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.stretch{flex:1}.scrub{width:100%;accent-color:var(--cyan);cursor:pointer;height:16px;min-width:50px}.speed{width:85px;accent-color:var(--cyan)}.tiny{font-size:10px;color:var(--muted);white-space:nowrap}.toggle{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:11px;cursor:pointer}.toggle input{accent-color:var(--cyan)}.jointrow{margin:11px 0}.jointrow>div{display:flex;justify-content:space-between;margin-bottom:6px;font-size:11px;color:#acc1c9}.jointrow output{font-family:Consolas,monospace;color:var(--cyan)}.jointrow input{width:100%;accent-color:var(--cyan)}.status{display:inline-flex;gap:7px;align-items:center;font-size:10px;color:var(--cyan);letter-spacing:.09em}.status:before{content:'';height:6px;width:6px;border-radius:100%;background:#55d9c5;box-shadow:0 0 9px #56dac9}.annotation{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;white-space:nowrap;transform:translate(-50%,-140%);font-family:Consolas,monospace;font-size:10px;letter-spacing:.05em;color:#bdedf0;text-shadow:0 1px 8px #001}.annotation:before{content:'';width:5px;height:5px;background:var(--cyan);border:1px solid #ddffff;border-radius:50%;box-shadow:0 0 9px var(--cyan)}.annotation span{display:block;border-left:1px solid #6bd9e766;padding:4px 7px;background:#061b23b8;border-radius:1px}.annotation.selected span{border-color:var(--orange);color:#ffd1ac}.annotation .pin-line{height:19px;width:1px;background:linear-gradient(var(--cyan),transparent);position:absolute;left:3px;top:16px}.viewport-hint{position:absolute;right:30px;bottom:155px;color:#79949f;font-size:10px;letter-spacing:.09em;display:flex;gap:7px;align-items:center}.top-note{position:absolute;top:21px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;color:#6b96a0;text-align:center;white-space:nowrap}.platform-mark{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);color:#6f9ba6;font-family:Consolas,monospace;font-size:10px;letter-spacing:.12em;opacity:.8}.platform-mark b{color:var(--cyan);font-weight:500}.notice{font-size:10px;line-height:1.6;color:#738d99;margin-top:12px}.graphic-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}.graphic-row select{font-size:10px;max-width:90px;background:#0c2330;color:#cae0e7;border:1px solid #2c5664;padding:7px;border-radius:4px}#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:99;background:radial-gradient(circle at center,#15323d,#040b14 68%);transition:opacity .75s}.load-mark{font-size:11px;font-weight:900;letter-spacing:.28em;color:var(--cyan)}.load-mark span{color:#637f8b}.load-title{font-weight:800;font-size:clamp(27px,4vw,52px);letter-spacing:.13em;margin:22px 0}.load-line{height:2px;width:170px;background:var(--cyan);box-shadow:0 0 20px var(--cyan)}.load-sub{font-size:9px;letter-spacing:.20em;color:#6b92a3;margin-top:18px}.hide{display:none!important}.error{color:#ffa680;font-size:13px;max-width:75ch;text-align:center;line-height:1.7}.mini-toggle{border:0;background:none;font-size:11px;color:var(--cyan);padding:2px}@media (max-width:1100px){.left{left:10px;top:10px;width:262px;padding:13px}.right{right:10px;top:10px;width:220px;padding:12px}.bottom{bottom:10px;width:calc(100% - 20px)}.top-note{display:none}}@media (max-width:700px){.left{left:7px;top:7px;width:min(242px,62vw);max-height:46vh;padding:11px}.right{right:7px;top:7px;width:145px;max-height:43vh;padding:10px}.right h3:nth-of-type(n+3),.right .metric:nth-of-type(n+6),.right .data-card{display:none}.brand{font-size:16px}.subtitle,.metadata{font-size:9px}.mode-grid .btn{padding:6px;font-size:9px}.camera-grid{grid-template-columns:repeat(2,1fr)}.bottom{bottom:6px;width:calc(100% - 12px);padding:8px}.timeline-row{gap:4px;flex-wrap:wrap}.timeline-info{min-width:85px;font-size:8px}.playback{gap:4px}.playback .btn{padding:8px 6px;font-size:9px}.speed{width:65px}.viewport-hint,.platform-mark{display:none}.annotation{font-size:8px}.annotation:nth-child(n+5){display:none}}