:root{color-scheme:dark;--canvas:#071421;--surface:#0b1d2be8;--surface2:#112535ef;--line:#ffffff1c;--dim:#879fac;--text:#e8f2f3;--aqua:#60d5d0;--amber:#eaba70;--danger:#f08581;--font:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:#071421;color:var(--text);font-family:var(--font)}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--aqua);outline-offset:2px}#app{position:relative;height:100vh;height:100dvh;overflow:hidden}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#557c86}.mist{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,12,21,.24),transparent 35%,transparent 68%,rgba(3,12,21,.14)),linear-gradient(0deg,rgba(0,8,18,.46),transparent 21%)}.topbar{position:absolute;z-index:8;top:0;left:0;right:0;height:72px;padding:0 23px;display:flex;align-items:center;gap:18px;background:linear-gradient(180deg,#071523f5,#071523d7);border-bottom:1px solid #ffffff1b;backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:13px}.brand-symbol{width:39px;height:38px;border:1px solid #60d5d08c;display:flex;flex-direction:column;gap:5px;justify-content:center;align-items:center;transform:skew(-10deg)}.brand-symbol span{width:21px;height:3px;background:var(--aqua);border-radius:4px}.brand-symbol span:nth-child(2){width:13px;transform:translateX(5px)}.brand-copy strong{display:block;font-size:14px;letter-spacing:.115em;font-weight:850;white-space:nowrap}.brand-copy em{color:var(--aqua);font-style:normal;margin:0 3px}.brand-copy small{display:block;font-size:9px;margin-top:6px;letter-spacing:.24em;color:#92b1b9;font-weight:650}.top-spacer,.bottom-spacer{flex:1}.scope{display:flex;align-items:center;gap:11px;font-size:10px;letter-spacing:.11em;font-weight:700;color:#b2ccd0}.scope b{margin-left:10px;color:var(--aqua);font-family:ui-monospace,monospace;font-size:13px;font-weight:550}.signal{width:7px;height:7px;border-radius:50%;background:#6be2ae;box-shadow:0 0 0 4px #6be2ae21,0 0 12px #6be2aeaa;animation:pulse 3s ease-in-out infinite}@keyframes pulse{50%{opacity:.48;box-shadow:0 0 0 8px #6be2ae00}}.ghost{border:1px solid #ffffff31;color:#c1d6dd;background:#ffffff08;padding:10px 13px;font-size:10px;font-weight:700;letter-spacing:.13em}.ghost:hover,.action-btn:hover{background:#7bc5d31d;border-color:#7bc5d386}.panel{background:var(--surface);border:1px solid #ffffff20;box-shadow:0 12px 44px #0000004d;backdrop-filter:blur(24px)}.left-panel,.right-panel{position:absolute;z-index:5;top:88px;bottom:98px;width:348px;overflow:auto;scrollbar-width:thin;scrollbar-color:#32616e transparent;padding:21px 20px}.left-panel{left:16px}.right-panel{right:16px;width:335px}.eyebrow{font-size:9px;color:var(--aqua);letter-spacing:.24em;font-weight:800}.side-heading{display:flex;align-items:flex-start;justify-content:space-between}.side-heading h1{font-size:22px;font-weight:650;letter-spacing:-.045em;margin:8px 0 22px}.side-heading h1 span{font-weight:300;color:#b6ced2}.mini-mark{border:1px solid #4aa6ab53;font-size:9px;color:var(--aqua);padding:6px;margin-top:5px;letter-spacing:.1em}.facility-select{border:1px solid #ffffff27;background:#0a1925d9;padding:12px}.facility-select label,.section-caption,.tiny-label{font-size:9px;letter-spacing:.13em;font-weight:750;color:#83a2ae}.facility-select select,select{width:100%;background:#142b3a;color:#e1f0f0;border:1px solid #ffffff33;border-radius:2px;padding:10px 11px;appearance:auto;font-size:12px;font-weight:700;margin-top:9px}.select-under{display:flex;justify-content:space-between;margin-top:9px;font-size:9px;letter-spacing:.09em;color:#7da5ad}.chart-title{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.135em;font-weight:800;color:#adced2;margin:23px 0 14px}.live-label{color:#79cfc3;font-size:8px;white-space:nowrap}.live-label i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#78dfb4;margin:0 6px 1px 0}.lock-viz{position:relative;min-height:189px;background:linear-gradient(180deg,#113247d1,#0e2835a4);border:1px solid #ffffff1e;overflow:hidden}.head-label{position:absolute;top:14px;z-index:2}.head-label.left{left:12px}.head-label.right{right:12px;text-align:right}.head-label span{display:block;font-size:8px;letter-spacing:.1em;color:#91adb9}.head-label strong{display:block;color:#dceef0;font-family:ui-monospace,monospace;font-size:13px;margin-top:5px}.chamber-frame{position:absolute;left:38px;top:58px;bottom:20px;width:94px;border-left:6px solid #8da7a96b;border-right:6px solid #8da7a96b;border-bottom:6px solid #8da7a96b;background:#061b28a4;overflow:hidden}.chamber-frame:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 25px,#ffffff18 26px,#ffffff18 27px);z-index:2}.chamber-water{position:absolute;left:0;bottom:0;width:100%;height:6%;background:linear-gradient(180deg,#2eaeb2,#127186);box-shadow:0 -3px 9px #44d1e56e;transition:height .2s linear}.waterline{height:2px;width:100%;background:#8eebdb;box-shadow:0 0 15px #78f5df}.boat-symbol{display:block;text-align:center;margin-top:-13px;color:#e9c77d;font-size:28px;text-shadow:0 1px 0 #584d3b}.chamber-mark{position:absolute;right:3px;font-size:8px;color:#a4c8ca;z-index:3}.chamber-top{top:8px}.chamber-middle{top:45%}.chamber-bottom{bottom:7px}.center-gauge{position:absolute;left:146px;top:84px}.gauge-label{font-size:9px;letter-spacing:.11em;color:#9ab5bd}.big-value{margin:5px 0}.big-value strong{font-size:35px;letter-spacing:-.055em;font-weight:600;font-variant-numeric:tabular-nums}.big-value span{color:var(--aqua);font-size:16px;margin-left:5px}.subvalue{font-size:9px;color:#70c7d2}.status-row{display:flex;justify-content:space-between;align-items:center;margin:17px 0 10px}.phase-badge{font-size:9px;letter-spacing:.1em;color:#dbb976;background:#dbb97620;padding:6px 8px}.data-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid #ffffff13;font-size:11px;color:#98b1bc}.data-row b{font-size:10px;color:#d4eced;font-variant-numeric:tabular-nums}.section-caption{margin:20px 0 12px}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.action-btn{min-height:38px;border:1px solid #315669;background:#16344680;color:#cee7e8;font-size:10px;font-weight:750;letter-spacing:.02em}.action-btn span{color:var(--aqua);font-size:17px;vertical-align:middle;margin-right:6px}.split-actions{display:flex;gap:8px}.primary-button{background:#4eb7b2;border:1px solid #64d9d4;color:#061a22;min-height:40px;padding:8px 12px;font-size:10px;letter-spacing:.08em;font-weight:850;flex:1}.primary-button:hover{background:#88e2d7}.danger-button{background:#842d3530;border:1px solid #b7545d73;color:#f1aaa6;padding:8px 11px;font-size:9px;letter-spacing:.05em;font-weight:800}.danger-button:hover{background:#842d3578}.muted-note{font-size:10px;color:#6e91a0;line-height:1.6;margin-top:11px}.right-panel h2{font-size:22px;letter-spacing:-.04em;font-weight:650;margin:8px 0 19px;display:flex;justify-content:space-between}.right-panel h2 span{font-size:17px;color:var(--aqua)}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric{background:#0b1d2edb;border:1px solid #ffffff22;min-height:88px;padding:12px}.metric>span{font-size:8px;letter-spacing:.13em;font-weight:800;color:#83a4af}.metric strong{display:block;margin:11px 0 9px;font-weight:650;font-size:24px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.metric small{font-size:10px;color:#85a8b3;letter-spacing:normal}.metric-track{background:#ffffff16;height:2px}.metric-track i{display:block;width:20%;height:100%;background:var(--aqua);box-shadow:0 0 10px #4ce5e499;transition:width .3s}.panel-divider{height:1px;background:#ffffff21;margin:20px 0}.right-panel .chart-title{margin:12px 0 14px}.right-panel .chart-title span:last-child{color:var(--aqua)}#minimap{display:block;width:100%;height:130px;border:1px solid #ffffff15;background:#061923aa;cursor:crosshair}.map-key{display:flex;gap:11px;justify-content:space-between;margin:11px 0 0;font-size:8px;color:#8fa6af}.map-key i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px}.lock-dot{background:#65d9cd}.pump-dot{background:#f0bb73}.bridge-dot{background:#9caec5}#trend{display:block;width:100%;height:102px;background:#081b2980}.axis-row{display:flex;justify-content:space-between;font-size:8px;color:#7b98a3;letter-spacing:.1em}.bridge-buttons{margin-top:10px}.bridge-buttons button{flex:1}.range-wrap{display:flex;align-items:center;gap:13px;margin-top:15px}.range-wrap input{flex:1;accent-color:var(--aqua);height:4px;cursor:pointer}.range-wrap b{font-family:ui-monospace,monospace;font-size:12px;color:#77dad0}.hud{position:absolute;z-index:4;border:1px solid #ffffff22;background:#061824ac;backdrop-filter:blur(12px);padding:12px 15px;color:#b1cdd3}.hud-zoom{left:383px;top:90px;display:flex;flex-direction:column;gap:4px}.hud-zoom span{font-size:9px;letter-spacing:.12em;color:#91b8c2}.hud-zoom strong{font-size:26px;letter-spacing:-.055em;font-weight:500;font-variant-numeric:tabular-nums}.hud-zoom strong small{font-size:12px;color:var(--aqua)}#hud-coord{letter-spacing:.05em;font-family:ui-monospace,monospace;font-size:9px}.hud-top{left:383px;bottom:101px;font-size:10px}.hud-eyebrow{font-size:9px;color:var(--aqua);letter-spacing:.18em;margin-bottom:6px}.toast{position:absolute;z-index:20;left:50%;top:90px;transform:translateX(-50%);max-width:450px;width:max-content;min-width:210px;pointer-events:none;background:#102936ec;border:1px solid #70b8bdaa;box-shadow:0 6px 35px #0008;padding:14px 19px;font-size:12px;opacity:0;transition:opacity .25s}.toast.visible{opacity:1}.toast.error{border-color:#f38b7d;color:#ffd3c3}.bottom-bar{position:absolute;left:0;right:0;bottom:0;z-index:9;height:80px;background:#071624ef;border-top:1px solid #ffffff25;backdrop-filter:blur(20px);display:flex;align-items:center;gap:18px;padding:0 24px}.bottom-group{display:flex;align-items:center;gap:13px;white-space:nowrap}.bottom-group strong{display:block;font-size:10px;letter-spacing:.13em}.bottom-group small{display:block;font-size:9px;letter-spacing:.17em;margin-top:6px;color:#7096a5}.bottom-group>span{font-size:9px;color:#91aeb7;letter-spacing:.1em;font-weight:800}.play-btn{background:#54c7bf;border:0;color:#061b22;width:41px;height:41px;font-size:21px;font-weight:900}.foot-divider{width:1px;height:30px;background:#ffffff29}.bottom-group select{width:auto;margin:0;font-size:10px;padding:8px 9px}.switch{position:relative;display:block;width:37px;height:21px}.switch input{opacity:0}.switch span{position:absolute;inset:0;border-radius:20px;background:#536b70;cursor:pointer;transition:background .2s}.switch span:before{content:'';position:absolute;top:4px;left:4px;width:13px;height:13px;border-radius:50%;background:white;transition:transform .2s}.switch input:checked+span{background:#4fbab1}.switch input:checked+span:before{transform:translateX(16px)}.performance{display:flex;align-items:center;gap:11px;font-family:ui-monospace,monospace;font-size:9px;color:#7fa6b0;white-space:nowrap}.performance b{color:var(--aqua)}.event-drawer{position:absolute;right:370px;bottom:98px;z-index:4;width:268px;max-height:216px;padding:13px 16px}.event-heading{display:flex;justify-content:space-between;align-items:center}.event-heading b{font-size:8px;color:#86a1ab}.event-feed{max-height:144px;overflow:hidden;margin-top:12px}.event-item{display:flex;align-items:flex-start;gap:8px;border-top:1px solid #ffffff14;padding:9px 0}.event-dot{width:6px;height:6px;background:var(--aqua);border-radius:50%;flex-shrink:0;margin-top:4px}.event-dot.danger{background:var(--danger)}.event-dot.warn{background:var(--amber)}.event-item strong{display:block;font-size:9px;letter-spacing:.04em}.event-item span{display:block;font-size:9px;color:#89a8b3;margin-top:4px}.overlay{position:absolute;z-index:50;inset:0;background:#04101eea;display:grid;place-items:center;padding:20px;backdrop-filter:blur(15px)}.overlay[hidden]{display:none}.help-card{position:relative;width:min(650px,95vw);background:#0d2433;border:1px solid #6bc7c360;padding:35px;max-height:calc(100dvh - 50px);overflow:auto}.help-card>button:first-child{position:absolute;right:20px;top:17px;border:0;background:transparent;color:#d5f0ed;font-size:17px}.help-card h2{font-size:34px;margin:10px 0 10px}.help-card p{color:#a8c0c9;line-height:1.65;font-size:13px}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.help-grid b{display:block;color:var(--aqua);font-size:11px;margin-bottom:7px}.help-grid span{font-size:11px;color:#a4bfc7;line-height:1.65}.help-card>.primary-button{width:100%}#boot{position:absolute;z-index:100;inset:0;background:radial-gradient(ellipse at 50% 30%,#113745,#061523 65%);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;transition:opacity .8s}#boot.hidden{opacity:0;pointer-events:none}.boot-emblem{font-size:28px;border:2px solid #64d5ce;width:92px;height:92px;display:grid;place-items:center;color:#e8f6f2;box-shadow:0 0 70px #3aafb83c}.boot-emblem span{color:var(--aqua)}#boot h2{font-size:44px;letter-spacing:.08em;font-weight:400;margin:5px 0 0}#boot h2 em{font-weight:800;font-style:normal;color:var(--aqua)}#boot p{font-size:12px;color:#9ab8c0}.boot-progress{height:3px;width:230px;background:#ffffff1a;margin-top:15px;overflow:hidden}.boot-progress i{display:block;width:100%;height:100%;background:#58d1d1;animation:loadbar 3s cubic-bezier(.22,.6,.2,1)}@keyframes loadbar{from{transform:translateX(-100%)}to{transform:translateX(0)}}.hidden-panels .left-panel,.hidden-panels .right-panel,.hidden-panels .event-drawer,.hidden-panels .hud-zoom,.hidden-panels .hud-top{display:none}@media(max-width:1420px){.left-panel{width:305px;padding:17px}.right-panel{width:290px;padding:17px}.hud-zoom,.hud-top{left:337px}.event-drawer{right:322px;width:230px}.quality-group,.quality-divider{display:none}.bottom-bar{gap:13px}.performance{gap:5px}}@media(max-width:1100px){.event-drawer,.hud-top{display:none}.scope span:not(.signal){display:none}.left-panel{width:265px}.right-panel{width:258px}.hud-zoom{left:293px}.performance span{display:none}.bottom-bar{padding:0 13px;gap:8px}.auto-group{display:none}}@media(max-width:760px){.topbar{height:60px;padding:0 10px;gap:5px}.brand-copy strong{font-size:10px;letter-spacing:.03em}.brand-copy small{font-size:6px}.brand-symbol{height:30px;width:29px}.scope{display:none}.ghost{padding:7px;font-size:9px}.left-panel{top:68px;left:8px;bottom:84px;width:calc(100vw - 16px);max-height:42dvh}.right-panel{top:auto;bottom:84px;right:8px;left:8px;width:calc(100vw - 16px);max-height:27dvh;overflow:auto}.hud-zoom{display:none}.left-panel .lock-viz{min-height:140px}.chamber-frame{top:40px}.center-gauge{top:62px}.side-heading h1{margin-bottom:11px}.right-panel .metrics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{padding:6px;min-height:60px}.metric>span{font-size:6px}.metric strong{font-size:13px}.metric small{font-size:7px}.right-panel .panel-divider,.right-panel .chart-title:not(:first-child),.right-panel #trend,.right-panel #minimap,.right-panel .axis-row,.right-panel .map-key{display:none}.bottom-bar{height:67px;gap:5px}.foot-divider{display:none}.bottom-group strong{font-size:8px}.bottom-group small{font-size:6px}.speed-group>span{display:none}.bottom-group select{padding:5px}.performance{display:none}.help-grid{grid-template-columns:1fr}}