:root{color-scheme:dark;--bg:#06111c;--panel:#091927;--panel2:#0d2230;--border:#1a3546;--border2:#16303e;--cyan:#56eadc;--blue:#55b9cf;--text:#e0eef1;--muted:#78919e;--gold:#edba73;--shadow:0 12px 30px #0004}*{box-sizing:border-box}html,body{margin:0;min-width:330px;height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px}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}#app{height:100vh;min-height:680px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:78px;min-height:78px;padding:0 23px;background:#081825;display:flex;align-items:center;border-bottom:1px solid var(--border);gap:23px;box-shadow:0 8px 36px #01071270;z-index:10}.brandlock{display:flex;gap:12px;align-items:center;min-width:169px}.mark{height:31px;width:31px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(45deg)}.mark span{display:block;background:var(--cyan)}.mark span:nth-child(2),.mark span:nth-child(3){background:#268e9c}.brandname{font-size:13px;font-weight:900;letter-spacing:1.25px}.brandname>span:first-child{color:var(--cyan)}.branddot{font-size:9px;color:#c3d8de}.brandcap{margin-top:5px;font-size:8px;letter-spacing:1.65px;color:#748c9b}.vertline{height:36px;border-left:1px solid #234051}.titleblock{min-width:0;flex:1}.top-eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:600;color:#58afc0}.bullet{color:#3b6779;margin:0 8px}.titleblock h1{font-size:19px;letter-spacing:1.2px;margin:6px 0 0;font-weight:750;white-space:nowrap}.titleblock h1 span{font-weight:300;color:#3a8291}.topactions{display:flex;align-items:center;gap:9px}.onair{display:flex;align-items:center;gap:9px;font-size:10px;font-weight:700;white-space:nowrap;color:#79dbc2;margin-right:10px;letter-spacing:1px}.livepulse{width:6px;height:6px;background:#60f1af;border-radius:100%;box-shadow:0 0 0 4px #3ebd8933,0 0 12px #53ffc5}.headbtn{height:35px;padding:0 14px;display:flex;align-items:center;gap:9px;color:#bbd5dd;background:#102638;border:1px solid #274356;letter-spacing:.9px;font-size:10px;font-weight:800}.headbtn svg{height:15px;width:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.headbtn.primary{color:#07232d;background:var(--cyan);border-color:var(--cyan);font-weight:900}.headbtn:hover{filter:brightness(1.12)}.bodygrid{display:grid;grid-template-columns:278px minmax(300px,1fr) 292px;flex:1;min-height:0}.panel{background:var(--panel);min-width:0;min-height:0}.left{border-right:1px solid var(--border)}.right{border-left:1px solid var(--border)}.scrollpanel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#244859 #091927}.sideheader{padding:24px 20px 19px;border-bottom:1px solid var(--border)}.section-id{font-size:11px;font-weight:800;letter-spacing:1.6px}.smallmuted{font-size:9px;color:#6b8999;letter-spacing:1.7px;margin-top:7px}.controlsection{padding:18px 20px;border-bottom:1px solid var(--border2)}.fieldlabel{display:block;font-size:9px;font-weight:800;letter-spacing:1.3px;color:#95b5c0;margin-bottom:10px}select{width:100%;height:39px;background:#102837;border:1px solid #2b495b;color:#d8eff0;padding:0 10px;border-radius:3px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#6a9fae 50%),linear-gradient(135deg,#6a9fae 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px;background-repeat:no-repeat}.sectionnote{font-size:10px;color:#617f8d;line-height:1.5;margin-top:10px}.mini-title{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:850;letter-spacing:1.2px;margin-bottom:17px;color:#d4e9ec}.micro-badge{border:1px solid #254b58;color:#5fbbba;border-radius:2px;padding:3px 5px;font-size:9px;letter-spacing:1px}.sliderblock{margin-top:17px}.sliderhead{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:11px}.sliderhead label{color:#91a8b4;font-size:11px}.sliderhead output{color:var(--cyan);font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;display:block;width:100%;height:4px;background:linear-gradient(to right,var(--cyan) var(--fill,50%),#203f4d var(--fill,50%));border-radius:3px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;background:#a8fff2;box-shadow:0 0 0 4px #47cabe25;border:2px solid #0a2832}input[type=range]::-moz-range-thumb{height:10px;width:10px;background:#a8fff2;border:1px solid #0c2b35;border-radius:50%}.switchrow{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px;cursor:pointer}.switchrow:last-child{margin-bottom:0}.switchrow strong{display:block;font-size:11px;font-weight:650;color:#cde3e9}.switchrow small{display:block;font-size:10px;color:#65828e;margin-top:5px}.switchrow input{position:absolute;opacity:0;width:1px;height:1px}.switchrow i{display:block;flex:0 0 33px;height:18px;background:#173441;border-radius:12px;border:1px solid #32505d;position:relative;transition:background .2s}.switchrow i:after{content:'';position:absolute;width:11px;height:11px;top:2.5px;left:3px;border-radius:50%;background:#6b8b9a;transition:transform .2s}.switchrow input:checked+i{background:#16736d;border-color:#2faaa0}.switchrow input:checked+i:after{transform:translateX(14px);background:#b8fff1}.switchrow input:focus-visible+i{outline:2px solid #fff;outline-offset:3px}.buttoncluster{display:grid;grid-template-columns:1fr 1fr;gap:8px}.softbtn{border:1px solid #2a4b5b;color:#acd3dc;background:#102a38;font-size:9px;font-weight:750;letter-spacing:.6px;padding:12px 5px}.softbtn:hover{border-color:#54bcb6;color:#e2ffff}.sidefooter{padding:17px 20px 25px;color:#4e7382;line-height:1.9;letter-spacing:1px;font-size:8px}.sidefooter span{color:var(--cyan)}.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#0c3141,#04121e)}#scene{display:block;width:100%;height:100%;outline:none;cursor:grab;touch-action:none}#scene:active{cursor:grabbing}.scene-top,.scene-bottom{position:absolute;z-index:2;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.scene-top{top:24px}.scene-bottom{bottom:88px;align-items:end}.scenelabel,.viewstyle{font-size:10px;letter-spacing:1.3px;color:#bcdfdf;font-weight:800}.scenelabel span:not(.corners){color:#4e8797}.corners{color:var(--cyan);font-size:20px;margin-right:6px}.viewstyle{font-size:9px;color:#7bcbcc}.signal{display:inline-block;width:5px;height:5px;background:var(--cyan);margin-right:8px;border-radius:50%}.frameid{margin-left:14px;padding-left:13px;border-left:1px solid #327385;color:#7099a4}.scene-left{position:absolute;top:85px;left:24px;pointer-events:none}.hud-label{font-size:9px;color:#71b2c5;letter-spacing:1.5px;font-weight:750}.hud-value{font-family:"Segoe UI",Arial,sans-serif;font-size:32px;line-height:1.35;letter-spacing:-1px;font-weight:350;color:#e1faff;font-variant-numeric:tabular-nums}.hud-value small{font-size:13px;color:#8fb2bb}.hud-detail{font-size:8px;letter-spacing:.75px;color:#698a9a}.hud-divider{height:1px;width:122px;background:#38677a;margin:20px 0}.compass{position:absolute;right:25px;top:100px;display:flex;flex-direction:column;align-items:center;color:#7ca4ad;opacity:.65;font-size:9px;pointer-events:none;gap:1px}.compass div{font-size:31px;font-weight:200;color:var(--cyan);line-height:1}.compass small{font-size:9px}.scene-key{display:flex;gap:16px;align-items:center;font-size:9px;letter-spacing:.75px;color:#81aab6;white-space:nowrap}.keydash{width:20px;border-bottom:2px solid #58ece6}.keydot{width:6px;height:6px;background:#f1bb76;border-radius:50%;margin-right:-10px}.keyline{width:20px;border-bottom:1px solid #76aeb1;margin-right:-10px}.hint{font-size:9px;letter-spacing:.8px;color:#718a98;text-align:right}.hint b{color:var(--cyan);padding:0 5px}.playbar{position:absolute;bottom:22px;left:24px;right:24px;height:46px;background:#071824cc;border:1px solid #285066;display:flex;align-items:center;padding:5px 14px 5px 7px;gap:13px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.playbar button{border:1px solid #447a84;background:#13505b;color:#9cfff0;width:34px;height:34px;font-size:18px;font-weight:750}.playtext{display:flex;flex-direction:column;min-width:110px;gap:4px}.playtext b{letter-spacing:1px;font-size:10px;color:#d7ffff}.playtext span{letter-spacing:1px;font-size:9px;color:#7da6b4}.progressline{flex:1;min-width:20px;height:4px;background:#1c4350;border-radius:4px;overflow:hidden}.progressline i{display:block;width:10%;height:100%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.fps{font-size:9px;color:#65b3b4;min-width:44px;text-align:right}.right .sideheader{padding:24px 18px 19px}.metricgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#1b3746;border-bottom:1px solid var(--border)}.metric{background:#0b2030;min-height:106px;padding:17px 15px}.metric>span{font-size:9px;font-weight:800;letter-spacing:1px;color:#7a9ba8}.metric strong{display:block;font-size:26px;margin:9px 0 5px;font-weight:550;font-variant-numeric:tabular-nums;color:#edfafd}.metric em{font-size:13px;font-style:normal;color:#86aebb;font-weight:400}.metric small{font-size:8px;letter-spacing:.7px;color:#527d8c}.datacard{border-bottom:1px solid var(--border2);padding:19px 17px 15px}.charttitle{display:flex;justify-content:space-between;align-items:center}.charttitle>div{display:flex;align-items:center;gap:9px}.charttitle strong{font-size:12px;font-weight:750;color:#d3e9eb}.charttitle>b{font-size:11px;white-space:nowrap;color:var(--cyan);font-variant-numeric:tabular-nums}.micro-index{font-size:9px;color:#67939e;padding:5px;border:1px solid #234554}.chartdesc{color:#658b9a;margin-top:9px;font-size:10px}.chart{display:block;margin-top:12px;width:100%;height:auto;max-height:250px;aspect-ratio:auto}.chartlegend{display:flex;justify-content:space-between;gap:5px;color:#638996;font-size:9px;margin-top:7px}.chartlegend span{display:flex;gap:6px;align-items:center}.chartlegend i{width:6px;height:6px;border-radius:50%}.legendcyan{background:var(--cyan)}.legendgold{background:var(--gold)}.infofoot{padding:18px;display:grid;gap:13px}.infofoot>div{display:flex;align-items:center;justify-content:space-between}.infofoot span{font-size:9px;letter-spacing:.8px;color:#759dab}.infofoot strong{font-size:12px;color:#c9e7e7;font-variant-numeric:tabular-nums}.footer{height:28px;min-height:28px;border-top:1px solid #1d3c4c;background:#071520;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:8px;letter-spacing:1px;color:#5d8796}.footerlamp{display:inline-block;width:6px;height:6px;background:#57e8bc;border-radius:50%;margin-right:7px}.footersep,.footer span{color:#438b93}.errorbox{position:absolute;inset:20% 15%;padding:30px;background:#09202b;border:1px solid #b37e61;color:#fff;z-index:20;font-size:16px;line-height:1.5}.errorbox[hidden]{display:none}
@media(max-width:1240px){.bodygrid{grid-template-columns:246px minmax(300px,1fr) 255px}.topbar{gap:14px;padding:0 15px}.onair{display:none}.titleblock h1{font-size:16px}.left .controlsection{padding-left:15px;padding-right:15px}.scene-left{top:80px;left:17px}.scene-top,.scene-bottom{left:17px;right:17px}.hint{display:none}.right .datacard{padding-left:12px;padding-right:12px}}
@media(max-width:940px){#app{height:auto;min-height:100vh;overflow:visible}.topbar{height:70px;min-height:70px}.top-eyebrow{display:none}.brandlock{min-width:155px}.bodygrid{grid-template-columns:245px minmax(330px,1fr);grid-template-rows:minmax(520px,calc(100vh - 98px)) auto}.left{grid-column:1;grid-row:1/3}.viewport{grid-column:2;grid-row:1;min-height:520px}.right{grid-column:2;grid-row:2;overflow:visible}.right .metricgrid{grid-template-columns:repeat(4,1fr)}.metric{min-height:100px}.footer{display:none}.right .datacard{display:inline-block;vertical-align:top;width:49.5%}.topactions .headbtn{font-size:9px;padding:0 9px}}
@media(max-width:630px){.topbar{gap:12px}.brandlock{min-width:0}.brandcap,.vertline,.titleblock{display:none}.topactions{margin-left:auto}.bodygrid{display:flex;flex-direction:column}.viewport{min-height:510px;height:65vh;order:0}.left{order:1;border-top:1px solid var(--border);max-height:none;overflow:visible}.right{order:2;max-height:none;overflow:visible}.scene-left{top:85px}.scene-top .viewstyle,.hint{display:none}.scene-key{gap:7px;font-size:8px}.playbar{bottom:16px}.scene-bottom{bottom:82px}.compass{right:14px}.metric{min-height:96px}.right .datacard{display:block;width:100%}.footer{display:none}}