:root{font-family:Inter,"Segoe UI",Arial,system-ui,sans-serif;color:#edf4f5;background:#081720;font-synthesis:none;--muted:#8297a2;--aqua:#73d5dc;--panel:#0e2530;--border:rgba(164,207,215,.14)}
*{box-sizing:border-box}html,body{height:100%;margin:0}body{min-width:360px}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}button:disabled{opacity:.4;cursor:not-allowed}.app{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 7% 0%,#172f3a 0%,#0a1b24 42%,#07151c 90%)}.header{height:72px;flex:none;display:flex;justify-content:space-between;align-items:center;padding:0 32px;border-bottom:1px solid var(--border);background:#081720e8}.brand{display:flex;align-items:center;gap:12px}.brand-icon{height:34px;width:34px;display:flex;align-items:flex-end;gap:4px;transform:skewY(-15deg)}.brand-icon span{width:7px;background:linear-gradient(0deg,#3d99a3,#a1edf1);border-radius:2px}.brand-icon span:nth-child(1){height:20px}.brand-icon span:nth-child(2){height:31px}.brand-icon span:nth-child(3){height:25px}.brand-name{font-weight:900;letter-spacing:.9px;font-size:18px}.brand-name>span:first-child{font-weight:400;color:#b4c2c5}.brand-domain{font-weight:600;color:var(--aqua);font-size:11px;letter-spacing:.05em}.header-center,.header-actions{display:flex;align-items:center;gap:21px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:750;color:#80aeb8}.header-product{font-size:10px;letter-spacing:2px;color:#d6e5e6;font-weight:800}.header-sep{height:16px;width:1px;background:#34515e}.connect{font-size:10px;letter-spacing:1.6px;color:#86c9ad;font-weight:750}.connect i,.live-led{display:inline-block;width:6px;height:6px;border-radius:100%;margin-right:7px;background:#6ed7b0;box-shadow:0 0 10px #5abf9c}.subtle-btn{border:1px solid #31515b;background:transparent;color:#b7ced2;padding:8px 11px;font-size:11px;letter-spacing:1px;font-weight:800;border-radius:6px}.subtle-btn span{padding-left:7px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;flex:1;min-height:690px;overflow:hidden}.visual-panel{display:flex;flex-direction:column;min-width:0;min-height:620px}.viewport{position:relative;flex:1;min-height:460px;overflow:hidden;background:radial-gradient(ellipse at 61% 46%,#b3d0d0 0%,#8bb5bf 36%,#547b89 80%,#263f4e 130%)}.viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.viewport canvas:active{cursor:grabbing}.viewport-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(9,29,37,.49) 0%,rgba(9,27,33,.05) 34%,transparent 51%,rgba(4,17,26,.48) 95%)}.view-top{position:absolute;inset:36px 32px auto 37px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.view-heading h1{font-size:clamp(30px,3.35vw,54px);letter-spacing:-1.6px;line-height:1.05;margin:12px 0 8px;font-weight:830;text-shadow:0 2px 21px #0b192540}.view-heading h1 small{font-size:.41em;color:#d7e7e7;font-weight:400;letter-spacing:-.5px}.view-heading p{font-size:11px;font-weight:800;letter-spacing:2.7px;margin:0;color:#d3ece9}.view-heading p span{color:#86e1e7;padding:0 5px}.view-kicker{display:flex;align-items:center;gap:10px;letter-spacing:2.3px;font-size:10px;font-weight:750;color:#d7e3de}.view-kicker .line{height:1px;width:23px;background:#9ee9e5}.view-mode{white-space:nowrap;align-self:flex-start;margin-top:3px;border:1px solid #deeeeb62;border-radius:4px;padding:10px 12px;background:#12324060;backdrop-filter:blur(10px);font-size:9px;letter-spacing:1.2px;font-weight:800}.view-fps{color:#a9c5c7;margin-left:13px}.hotspot{position:absolute;z-index:3;display:flex;align-items:center;gap:8px;padding:6px;background:none;border:none;color:#fff;transform:translate(-16px,-16px);filter:drop-shadow(0 3px 5px #0f1e2d);opacity:0;pointer-events:none;transition:opacity .2s}.hotspot.visible{opacity:1;pointer-events:auto}.hotspot-ring{height:26px;width:26px;border:1px solid #f4ffff;border-radius:50%;background:#115263ba;display:grid;place-items:center;font-size:20px;font-weight:400;line-height:1}.hotspot-name{letter-spacing:1.2px;font-size:9px;border-radius:3px;background:#0b2535c9;padding:7px 8px;font-weight:850;white-space:nowrap}.view-bottom{position:absolute;left:30px;right:26px;bottom:46px;display:flex;gap:20px;justify-content:space-between;align-items:center}.camera-bar{border:1px solid #bacfc16e;display:flex;align-items:center;background:#0b2534cc;backdrop-filter:blur(9px);padding:4px;border-radius:7px;gap:4px}.camera-bar>span{font-size:9px;letter-spacing:2px;font-weight:750;color:#a2bdc1;margin:0 12px}.cam-btn{color:#d1e3e3;border:0;background:none;border-radius:4px;padding:10px 12px;font-size:11px;letter-spacing:.3px}.cam-btn.active{background:#6bc2c7;color:#09232c;font-weight:800}.view-tools{display:flex;gap:6px}.icon-btn{background:#0b2534cf;color:#e5f4f6;border:1px solid #cce0dc6a;font-size:20px;line-height:1;width:39px;height:39px;border-radius:6px}.scene-note{position:absolute;bottom:17px;left:38px;letter-spacing:1.2px;font-weight:800;font-size:8px;color:#e4f0e7c5}.scene-note span{color:var(--aqua);padding:0 6px}.instrument-panel{flex:none;min-height:154px;padding:17px 27px 16px;background:linear-gradient(180deg,#0f2733,#0a202b);border-top:1px solid #4e7c87;box-shadow:0 -12px 50px #09202a40}.instrument-heading{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--border)}.instrument-heading>div{display:flex;align-items:center;gap:15px}.instrument-heading strong{font-weight:600;font-size:12px}.transmission{font-size:9px;color:#90a6af;letter-spacing:1.3px}.readouts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) 180px;gap:18px;padding-top:14px}.readout{min-width:0;border-right:1px solid #41616a55;padding-right:12px}.readout>span,.chart-mini>span{display:block;font-size:9px;color:#8daab4;font-weight:800;letter-spacing:1.1px;white-space:nowrap}.readout>div:nth-child(2){display:flex;align-items:baseline;gap:7px;padding-top:8px}.readout b{font-size:23px;font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.5px}.readout em{font-style:normal;color:#88b6bc;font-size:10px}.readout-track{height:3px;background:#324e5b;margin-top:13px;border-radius:10px;overflow:hidden}.readout-track div{height:100%;width:0;background:var(--aqua);transition:width .18s}.chart-mini{display:flex;flex-direction:column;gap:3px;min-width:0}.chart-mini canvas{width:100%;height:50px}.sidebar{overflow-y:auto;min-height:0;background:linear-gradient(165deg,#112b35,#0b202a);border-left:1px solid #2d4a54;padding:27px 26px 12px;scrollbar-width:thin;scrollbar-color:#426572 #112b35}.sidebar-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 27px}.sidebar-head h2{font-size:21px;letter-spacing:-.5px;font-weight:650;margin:7px 0 0}.side-icon{font-size:25px;color:#6ca4b0;border:1px solid var(--border);border-radius:9px;padding:5px 10px}.section-title{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:1.5px;font-weight:850;color:#c1d4d5;margin:24px 0 17px}.section-title>span{color:var(--aqua);font-size:11px}.section-title>div{background:#355561;height:1px;flex:1}.play-controls{display:flex;gap:9px}.start-btn{flex:1;height:47px;background:#8bdde0;border:0;color:#0e2832;font-weight:850;font-size:13px;border-radius:5px}.start-btn span:first-child{margin-right:8px}.start-btn.running{background:#d9e9e8}.reset-btn{width:49px;border:1px solid #47616d;background:#203844;color:#bfd6dc;font-size:28px;border-radius:5px}.brake-btn{display:flex;align-items:center;text-align:left;width:100%;padding:12px 10px;margin-top:10px;border:1px solid #89605a;background:#34282b;border-radius:5px;color:#f4cecb;gap:12px}.brake-symbol{color:#ed9c8c;font-size:26px}.brake-btn>span:nth-child(2){display:flex;flex-direction:column;gap:4px;flex:1}.brake-btn strong{font-size:10px;letter-spacing:1.2px}.brake-btn small{font-size:10px;color:#bca19e}.brake-light{width:7px;height:7px;background:#a7645d;border-radius:50%}.brake-btn.engaged{background:#6d2829;border-color:#e66d6a}.brake-btn.engaged .brake-light{background:#ff9588;box-shadow:0 0 11px #ec7a74}.direction-control{margin-top:19px}.field-label{font-size:9px;color:#d7e4e4;font-weight:800;letter-spacing:1px;display:flex;justify-content:space-between;margin-bottom:9px}.field-label span{color:#71929c;font-weight:650;font-size:8px}.segmented{display:flex;gap:5px;background:#081c26;border:1px solid #2e4d59;border-radius:5px;padding:4px}.direction-btn{flex:1;background:none;color:#a9c3ca;padding:9px 4px;border:0;border-radius:3px;font-weight:850;font-size:17px}.direction-btn span{font-size:11px;font-weight:600;padding-left:4px}.direction-btn.selected{background:#294c58;color:#b9f1f0}.slider-field{margin:0 0 22px}.slider-field label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#dce9ea;font-weight:550}.slider-field output{font-variant-numeric:tabular-nums;font-weight:850;color:#9ae5e8;font-size:12px}.slider-field input{display:block;width:100%;margin:13px 0 9px;accent-color:#7ed0d3;cursor:pointer;touch-action:pan-x}.slider-ends{display:flex;justify-content:space-between;font-weight:750;font-size:9px;color:#678d99;letter-spacing:.6px}.slider-field.compact{margin-bottom:4px}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0;cursor:pointer}.toggle-row>span{display:flex;flex-direction:column;gap:4px}.toggle-row b{font-weight:650;font-size:12px}.toggle-row small{font-size:10px;color:#819da6}.toggle-row input{position:absolute;opacity:0}.toggle-track{position:relative;background:#294651;width:38px;height:21px;border-radius:50px;flex:none;transition:background .2s}.toggle-track:before{content:'';position:absolute;top:3px;left:3px;background:#90aeb3;width:15px;height:15px;border-radius:50%;transition:transform .2s}.toggle-row input:checked + .toggle-track{background:#488f99}.toggle-row input:checked + .toggle-track:before{background:#b5f0ed;transform:translateX(17px)}.inspector{background:#091c27;border:1px solid #31515e;border-radius:7px;padding:15px}.inspector-top{display:flex;justify-content:space-between;letter-spacing:1.25px;color:#78b9c4;font-size:9px;font-weight:800}.inspector h3{font-size:15px;margin:10px 0 7px;font-weight:750}.inspector p{font-size:11px;color:#9cb6bf;line-height:1.65;margin:0 0 12px;min-height:51px}.inspector-data{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #244450;padding-top:12px;gap:8px}.inspector-data span{font-size:9px;color:#799ba5;font-weight:750;letter-spacing:.6px}.inspector-data strong{font-size:11px;text-align:right}.warning{margin-top:11px;border:1px solid #a57747;background:#46351d;color:#ffe0ad;padding:11px 12px;font-size:11px;line-height:1.4;border-radius:5px}.disclaimer{font-size:9px;color:#64818d;line-height:1.5;letter-spacing:.55px;margin:15px 0}.footer{flex:none;height:40px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 24px;color:#728d9b;font-size:9px;letter-spacing:1px;font-weight:700}.footer .dot{color:#8ce4e0;padding:0 6px}.footer button{border:none;background:transparent;color:#a4d0d7;font-weight:750;font-size:10px;letter-spacing:.6px}.help-dialog{width:min(630px,calc(100vw - 30px));background:#102a35;border:1px solid #50808b;border-radius:12px;color:#dfeded;padding:30px;box-shadow:0 30px 100px #000b}.help-dialog::backdrop{background:#030e16b6;backdrop-filter:blur(7px)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{margin:10px 0 4px;font-size:25px}.modal-close{border:1px solid #4f7983;border-radius:6px;background:transparent;color:#d9e6e5;font-size:18px;padding:8px 12px}.help-dialog>p{color:#a7bdc5;line-height:1.7;font-size:13px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0}.help-grid>div{background:#0a202b;border:1px solid #31515c;border-radius:7px;padding:14px}.help-grid strong{font-size:12px;color:#9de0e0}.help-grid p{font-size:11px;line-height:1.6;color:#93aeb8}.help-dialog .modal-caveat{font-size:11px;color:#8aa3ad}.modal-action{background:#8ddfe0;color:#0b2430;border:0;border-radius:5px;padding:12px 16px;font-weight:850;font-size:11px;letter-spacing:.9px}.error-banner{position:absolute;z-index:9;top:42%;left:8%;right:8%;border-radius:7px;background:#5d2428;color:#fff;padding:18px;text-align:center;font-size:13px}.error-banner[hidden],.warning[hidden]{display:none}
@media(max-width:1330px){.workspace{grid-template-columns:minmax(0,1fr) 310px}.readouts{grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.chart-mini{display:none}.readout b{font-size:21px}.sidebar{padding:24px 18px 10px}.view-mode .view-fps{display:none}}
@media(max-width:980px){.workspace{display:flex;flex-direction:column}.visual-panel{min-height:610px}.viewport{height:460px;flex:none}.sidebar{overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding:24px 30px}.sidebar-head{grid-column:1/-1}.sidebar>.section-title{grid-column:1/-1}.sidebar>.section-title:nth-of-type(3){margin-top:8px}.sidebar>.inspector,.sidebar>.warning,.sidebar>.disclaimer{grid-column:1/-1}.sidebar>.play-controls,.sidebar>.brake-btn,.sidebar>.direction-control{grid-column:1/-1}.sidebar>.slider-field{grid-column:auto}.sidebar>.toggle-row{grid-column:auto}.footer>span:nth-child(2){display:none}}
@media(max-width:650px){.header{height:62px;padding:0 15px}.brand-name{font-size:15px}.header-center{display:none}.connect{display:none}.header-actions{gap:6px}.workspace{min-height:unset}.visual-panel{min-height:unset}.viewport{height:480px}.view-top{inset:19px 17px auto 17px}.view-heading h1{font-size:34px}.view-heading h1 small{display:block;margin-top:4px;font-size:15px}.view-heading p{font-size:9px;letter-spacing:1.5px}.view-kicker{font-size:8px;letter-spacing:1.2px}.view-mode{padding:7px;font-size:8px}.view-bottom{left:14px;right:12px;bottom:44px}.camera-bar>span{display:none}.cam-btn{font-size:10px;padding:9px 8px}.icon-btn{width:34px;height:35px;font-size:18px}.scene-note{left:16px;right:10px;bottom:13px;font-size:7px;line-height:1.5}.instrument-panel{padding:16px}.instrument-heading strong{display:none}.readouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 8px}.readout:nth-child(3){border:0}.readout b{font-size:22px}.readout>span{font-size:8px;white-space:normal}.position-readout{grid-column:2/-1}.sidebar{padding:20px;display:block}.sidebar>.slider-field{margin:0 0 22px}.footer{padding:0 13px}.footer>span{font-size:8px}.footer button{white-space:nowrap}.hotspot-name{display:none}.help-grid{grid-template-columns:1fr}.help-dialog{padding:20px}.view-heading{max-width:250px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}