:root{color-scheme:dark;--bg:#081825;--glass:rgba(7,23,36,.88);--glass2:rgba(8,28,43,.90);--edge:rgba(143,210,225,.18);--text:#e6f4f7;--muted:#8aa7b5;--cyan:#32d6ed;--teal:#4be3c6;--amber:#ffbc70;--radius:12px}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{background:#0b2232;color:var(--text);font-family:'DM Sans',Inter,Arial,sans-serif;font-size:12px;font-weight:500}button,select,input{font:inherit}button{cursor:pointer;transition:background .16s,border-color .16s,transform .16s;color:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--teal);outline-offset:3px}#viewport{display:block;width:100%;height:100%;outline:none;touch-action:none}#vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 45% 45%,transparent 42%,rgba(0,10,22,.29) 100%)}.glass{background:var(--glass);border:1px solid var(--edge);box-shadow:0 16px 36px #0002;backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px)}
#header{position:absolute;top:20px;left:24px;right:24px;height:69px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-radius:var(--radius);z-index:10}.wordmark{display:flex;align-items:center;gap:14px}.brandmark{font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;color:var(--teal);letter-spacing:-9px;line-height:1;padding-right:10px}.brandmark span{color:#b2f4ff;font-size:15px;vertical-align:top;letter-spacing:0;margin-left:2px}.eyebrow{color:var(--cyan);font-size:9px;font-weight:800;letter-spacing:2.15px;line-height:1.4}h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;margin:0;text-transform:uppercase;font-weight:700}h1{font-size:26px;letter-spacing:2.0px;line-height:1.2;margin-top:3px}h1 span{font-size:18px;letter-spacing:1.4px;color:#8baebd}.header-right{display:flex;align-items:center;gap:12px;font-weight:700;font-size:10px;letter-spacing:1.1px}.live-dot{height:7px;width:7px;background:var(--teal);border-radius:50%;box-shadow:0 0 10px #32edcd}.pill{border:1px solid #315469;border-radius:20px;padding:8px 13px;color:#96bac6;margin-left:8px;font-size:9px;letter-spacing:1.1px}
#left-tools{position:absolute;top:107px;left:24px;width:184px;border-radius:var(--radius);padding:16px 10px;z-index:9}.tool-heading{color:#708e9e;font-size:9px;font-weight:800;letter-spacing:1.35px;margin:1px 12px 12px}.nav-btn{height:35px;width:100%;border:1px solid transparent;background:transparent;color:#b0cbd2;border-radius:6px;display:flex;align-items:center;text-align:left;gap:13px;padding:0 11px;font-size:11px}.nav-btn span{width:16px;font-size:15px;color:#6a96a5;text-align:center}.nav-btn.active,.nav-btn:hover{background:#1d4054;border-color:#355e71;color:#fff}.nav-btn.active span{color:var(--teal)}.tool-divider{height:1px;background:var(--edge);margin:14px 7px 18px}.switchline{display:flex;align-items:center;gap:9px;color:#b3c7d0;font-size:11px;padding:7px 10px;cursor:pointer}.switchline span{margin-left:auto;color:#7f9da7}.switchline input{appearance:none;position:relative;width:26px;height:14px;border:1px solid #4d6773;background:#223542;border-radius:12px;cursor:pointer;flex-shrink:0}.switchline input:before{content:'';position:absolute;left:3px;top:3px;width:6px;height:6px;background:#8aa5b2;border-radius:50%;transition:all .15s}.switchline input:checked{background:#104949;border-color:#1f9e94}.switchline input:checked:before{background:#64e8d0;left:15px}
#right-panel{position:absolute;right:24px;top:107px;bottom:104px;width:317px;z-index:9;padding:18px 18px 12px;overflow-y:auto;scrollbar-color:#24485b transparent;scrollbar-width:thin;border-radius:var(--radius)}.aside-title-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:15px}.aside-title-row h2{font-size:26px;margin-top:1px;letter-spacing:.8px}.status-led{font-size:9px;color:var(--teal);letter-spacing:1px}.output-block{background:linear-gradient(128deg,#0f3443,#0d2536);border:1px solid #275166;border-radius:9px;padding:14px 13px 10px}.metric-label,.mini-metrics span{color:#8ba6b3;font-size:9px;letter-spacing:1.25px;font-weight:800}.metric-label{display:flex;justify-content:space-between}.metric-label span{color:#62828e;font-size:8px}.metric-main{display:flex;align-items:baseline;gap:8px;padding-top:4px}.metric-main strong{font-family:'Barlow Condensed',sans-serif;font-size:58px;font-weight:700;line-height:1;color:#ecfaff;font-variant-numeric:tabular-nums}.metric-main>span{font-size:17px;font-weight:700;color:#91b9c5}.metric-main em{margin-left:auto;color:var(--teal);font-size:15px;font-style:normal;font-weight:700}.meter{height:5px;background:#213946;border-radius:8px;overflow:hidden;margin-top:13px}.meter div{width:0;height:100%;background:linear-gradient(90deg,#1682ad,#60e4ce);transition:width .2s}.meter-foot{display:flex;justify-content:space-between;color:#62848e;margin-top:8px;font-size:9px}.mini-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.mini-metrics>div{background:#0c2534;border:1px solid #1e3d4c;border-radius:7px;padding:12px 10px 10px}.mini-metrics span{display:block;font-size:8px}.mini-metrics strong{display:block;margin-top:6px;font:700 26px 'Barlow Condensed',sans-serif;color:#e5faff}.mini-metrics small{font:500 11px 'DM Sans',sans-serif;color:#83a6b2}.section-label{display:flex;gap:10px;align-items:center;color:#c2e0e9;border-top:1px solid #294455;margin:19px 0 13px;padding-top:16px;font-size:10px;letter-spacing:1.2px;font-weight:800}.section-label span{color:var(--teal);font-weight:800}.range-label{display:flex;justify-content:space-between;align-items:center;color:#aec8d0;font-size:11px;margin:11px 0 6px}.range-label output{color:#d7f9f7;font-weight:700;font-variant-numeric:tabular-nums}input[type=range]{appearance:none;width:100%;height:4px;background:linear-gradient(90deg,#2394ac,#25536b);border-radius:9px;cursor:pointer;outline:none;margin:6px 0}input[type=range]::-webkit-slider-thumb{appearance:none;height:14px;width:14px;background:#59e4dc;border:3px solid #e2fffb;border-radius:50%;box-shadow:0 0 10px #57dcc69e}input[type=range]::-moz-range-thumb{height:10px;width:10px;background:#59e4dc;border:2px solid #e2fffb;border-radius:50%}.range-ends{display:flex;justify-content:space-between;color:#60808e;font-size:9px;margin:1px 0 12px}.segmented{display:flex;background:#091d2b;border:1px solid #254657;border-radius:7px;padding:3px}.segmented button{border:none;border-radius:5px;background:transparent;padding:7px 10px;flex:1;font-weight:700;font-size:10px;letter-spacing:.6px;color:#92afbb}.segmented button.active{background:#1a5662;color:#e2faf9}.lock-row{display:flex;justify-content:space-between;gap:6px;color:#9db6be;font-size:10px;margin:14px 0 8px}.lock-row>span:last-child{color:#70bbc8;font-variant-numeric:tabular-nums}.meter.narrow{margin-top:0}.dual-actions{display:flex;gap:7px;margin-top:12px}.btn{border:1px solid #315464;background:#143042;padding:9px 10px;border-radius:6px;color:#bad4de;white-space:nowrap;font-size:10px;font-weight:700;flex:1}.btn:hover,.btn.selected{background:#245268;color:#fff}.btn.primary{background:#14635e;color:#d3fff5;border-color:#278980}.btn.primary:hover{background:#168376}.legal-note{font-size:9px;color:#597e8b;line-height:1.7;margin:16px 0 0}
#scene-labels{position:absolute;inset:0;pointer-events:none;z-index:3}.hotspot{position:absolute;display:flex;align-items:center;gap:8px;transform:translate(-10px,-50%);pointer-events:auto;background:#092837dc;border:1px solid #43829696;color:#d5faff;border-radius:15px;padding:5px 10px 5px 5px;font-size:9px;letter-spacing:.65px;font-weight:800;box-shadow:0 3px 15px #0004;white-space:nowrap}.hotspot:hover{background:#1e6171}.hotspot-dot{width:13px;height:13px;border:3px solid #73e5da;background:#0c4852;border-radius:50%;box-shadow:0 0 0 3px #64e9dc40}.hotspot-name{font-size:9px}
#inspect-card{position:absolute;left:230px;bottom:114px;width:315px;padding:19px;border-radius:11px;z-index:11}.hidden{display:none!important}#inspect-card h3{font-size:25px;line-height:1.06;letter-spacing:.7px;margin:7px 26px 4px 0}#inspect-close{position:absolute;top:12px;right:13px;font-size:24px;border:none;background:transparent;color:#acc5ce}#inspect-card .inspect-type{color:var(--teal);font-size:10px;font-weight:800;letter-spacing:1px;margin:6px 0 12px}#inspect-card p{color:#aac2cb;line-height:1.7;font-size:11px}.inspect-stat{border-left:2px solid #2bd1ba;padding:6px 10px;margin:6px 0;background:#1a45502a;font-size:10px;color:#daf1f1}#inspect-focus{margin-top:12px;width:100%}
#bottom-bar{position:absolute;bottom:30px;left:24px;right:24px;height:64px;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:0 18px;z-index:8;gap:20px}.footer-left{display:flex;align-items:center;gap:16px}.footer-label{font-size:9px;letter-spacing:1.5px;color:#7995a2;font-weight:800;white-space:nowrap}.scenario-row{display:flex;gap:5px}.scenario{height:34px;padding:0 14px;border:1px solid #2d4b5a;background:#0e2939;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.6px;color:#b1c8d0}.scenario:hover{border-color:#64b4c0}.scenario.active{background:#136560;border-color:#299d8f;color:#e6fff9}.footer-right{display:flex;align-items:center;gap:8px}.footer-right button{background:#193b4b;border:1px solid #3b6272;border-radius:5px;height:33px;min-width:33px;font-weight:700}.footer-right button:hover{background:#296477}.footer-right select{background:#102a3a;border:1px solid #3b6272;color:#b4d1da;border-radius:5px;height:33px;padding:0 8px}.footer-right #fps{color:#668e9c;white-space:nowrap;font-size:10px;width:49px;text-align:right}#help{position:absolute;bottom:9px;width:100%;text-align:center;color:#aec4c8;font-size:8px;letter-spacing:1.8px;text-shadow:0 2px 6px #001e31;pointer-events:none;z-index:3}
#toast{position:absolute;left:50%;top:105px;transform:translate(-50%,-10px);padding:12px 18px;color:#d9faf8;background:#093b45ed;border:1px solid #2c9f9e;border-radius:6px;z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}#toast.shown{opacity:1;transform:translate(-50%,0)}
#loading{position:absolute;inset:0;background:radial-gradient(ellipse at center,#103a4c,#071521);z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;transition:opacity .6s,visibility .6s}#loading.done{opacity:0;visibility:hidden;pointer-events:none}.loading-logo{font:800 118px 'Barlow Condensed',sans-serif;color:#5be8dc;letter-spacing:-17px;padding-right:15px;line-height:.9}.loading-logo span{font-size:23px;letter-spacing:0;vertical-align:top;color:#b9f8fe}.loading-title{letter-spacing:3.5px;font-size:13px;font-weight:800}.loading-sub{font-size:11px;color:#729bad}.loading-progress{width:190px;height:3px;background:#174255;margin-top:20px;overflow:hidden}.loading-progress span{display:block;width:50%;height:100%;background:#54e9d3;animation:progress 1.2s ease-in-out infinite}@keyframes progress{from{transform:translateX(-100%)}to{transform:translateX(200%)}}
@media (max-width:1150px){#right-panel{width:277px}#left-tools{width:160px}.footer-label{display:none}.scenario{padding:0 8px}#header{right:15px;left:15px}#left-tools{left:15px}#right-panel{right:15px}#bottom-bar{left:15px;right:15px}}
@media (max-width:820px){#header{height:65px;padding:0 13px;top:8px}.header-right .pill{display:none}.header-right{font-size:8px}h1{font-size:21px}h1 span{font-size:13px}.eyebrow{font-size:8px;letter-spacing:1.2px}#left-tools{top:83px;width:151px;padding:12px 7px}#right-panel{right:8px;top:83px;bottom:97px;width:241px;padding:13px}#left-tools{left:8px}.aside-title-row h2{font-size:21px}#bottom-bar{left:8px;right:8px;bottom:23px;height:60px;padding:0 7px}.footer-left{gap:0}.scenario{padding:0 6px;font-size:8px}.footer-right{gap:4px}.footer-right select{padding:0 2px;max-width:49px}#help{font-size:6px;letter-spacing:.7px}#inspect-card{left:169px;bottom:92px;width:min(290px,55vw)}}
@media (max-width:550px){#header{top:5px;left:5px;right:5px;height:58px}.header-right #system-state{display:none}.header-right{gap:4px}.wordmark{gap:7px}.brandmark{font-size:37px}.eyebrow{font-size:7px}.nav-btn{font-size:0;width:36px;justify-content:center;padding:0}.nav-btn span{font-size:17px}.tool-heading{display:none}.switchline{font-size:0;width:35px;justify-content:center;padding:7px 5px}.switchline span{display:none}#left-tools{left:5px;top:72px;width:51px;padding:7px}.tool-divider{margin:6px 0}#right-panel{width:222px;top:72px;right:5px;bottom:125px;padding:11px}.output-block{padding:10px}.metric-main strong{font-size:42px}.metric-label{font-size:8px}.metric-label span{display:none}.section-label{margin:12px 0 9px}.mini-metrics{gap:4px}.mini-metrics>div{padding:8px 6px}.mini-metrics strong{font-size:21px}.dual-actions .btn{padding:8px 4px;font-size:9px}#bottom-bar{height:99px;bottom:15px;left:5px;right:5px;display:block;padding:7px}#bottom-bar .footer-left,.scenario-row{width:100%;justify-content:center}#bottom-bar .footer-right{justify-content:center;margin-top:6px}.scenario{flex:1;height:28px}#help{bottom:3px;font-size:5px}#inspect-card{left:59px;width:min(270px,69vw);bottom:121px;padding:13px}.hotspot-name{display:none}.hotspot{padding:3px}}