:root{color-scheme:dark;--bg:#0b151a;--panel:#101e24;--panel2:#142329;--stroke:#2b3c42;--stroke2:#24343a;--text:#ebeee8;--muted:#8ba1a1;--dim:#62787b;--teal:#93c9c0;--gold:#d9bd7c;--amber:#e5b06d;--red:#eb8a71}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font:13px/1.5 system-ui,-apple-system,"Segoe UI",Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #a9dad0;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.38}h1,h2,h3,p{margin:0}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:79px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--stroke2);padding:0 30px;background:#0b161b}.brand{display:flex;gap:15px;align-items:center}.brand-mark{width:36px;height:36px;border:1px solid #63817f;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;transform:rotate(-20deg)}.brand-mark span{height:3px;border-top:2px solid #c8d7c8;border-radius:50%;width:22px}.brand-mark span:nth-child(2){width:16px}.brand-mark span:nth-child(3){width:11px}.eyebrow{font-size:9px;letter-spacing:.21em;font-weight:750;color:var(--teal)}.slash{margin:0 6px;color:#566c6d}h1{font-size:22px;line-height:1.3;letter-spacing:.065em;font-weight:620}h1 .soft{font-weight:350;color:#839f9e}.topbar-right{display:flex;align-items:center;gap:15px}.top-chip,.chip-live{font-size:10px;letter-spacing:.09em;font-weight:700}.top-chip{color:#a5afad}.dotsep{color:#6c9189}.chip-live{border:1px solid #35544f;border-radius:4px;padding:8px 11px;color:#c0d9c8}.live-dot,.cue-dot{display:inline-block;width:6px;height:6px;background:#a6d19d;border-radius:50%;margin-right:7px;box-shadow:0 0 9px #86d2a280}.icon-button{width:31px;height:31px;border:1px solid #456264;border-radius:50%;background:transparent;color:var(--text);font-weight:700}.workspace{display:grid;grid-template-columns:290px minmax(520px,1fr) 294px;min-height:0;flex:1}.panel{min-height:0;background:var(--panel);display:flex;flex-direction:column}.controls{border-right:1px solid var(--stroke)}.insights{border-left:1px solid var(--stroke)}.panel-heading{height:95px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:23px 21px 17px;border-bottom:1px solid var(--stroke2)}.kicker{font-size:9px;letter-spacing:.16em;color:var(--teal);font-weight:750}.panel-heading h2{font-size:17px;font-weight:500;letter-spacing:-.035em;margin-top:5px}.heading-index{font-size:10px;letter-spacing:.1em;color:var(--dim)}.panel-scroll{overflow-y:auto;min-height:0;flex:1;scrollbar-color:#3a5258 transparent;scrollbar-width:thin}.control-section{padding:21px 21px 22px;border-bottom:1px solid var(--stroke2)}.control-section h3,.section-title{display:flex;justify-content:space-between;align-items:center;color:#d4dfd9;font-size:10px;font-weight:760;letter-spacing:.13em;margin-bottom:16px}.control-section h3 span,.section-title span{color:#637d7c;font-weight:500}.scenario-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scenario{padding:13px 8px 12px;text-align:left;border:1px solid #35454a;border-radius:5px;background:#16272e;color:#bdcccc;display:flex;align-items:center;gap:8px;font-size:11px;transition:border-color .15s,background .15s}.scenario:hover{background:#20353a}.scenario.active{border-color:#81b7ad;background:#24403f;color:#e7f2e7}.scenario-icon{font-size:17px;color:#d1bf92;width:20px;text-align:center}.range-heading{margin-top:2px;margin-bottom:12px;display:flex;justify-content:space-between;gap:5px;font-size:12px;color:#b7c7c5}.range-heading strong{color:#e1e2d1;font-size:12px;font-weight:650}input[type="range"]{-webkit-appearance:none;appearance:none;background:#4b6566;width:100%;height:4px;margin:9px 0 0;border-radius:8px;cursor:pointer}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border:3px solid #d3dfce;background:#78a89f;border-radius:50%;box-shadow:0 0 0 4px #234440}input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:2px solid #d3dfce;background:#78a89f;border-radius:50%}.range-minmax{display:flex;justify-content:space-between;color:#587678;font-size:10px;margin-top:6px;margin-bottom:23px}.range-minmax:last-of-type{margin-bottom:0}.toggle-rows{margin-bottom:21px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #20343b}.toggle-row>div{display:flex;flex-direction:column}.toggle-row strong{color:#d9e3dc;font-size:12px;font-weight:560}.toggle-row span{color:#6f898b;font-size:9px;letter-spacing:.07em}.toggle-row .switch{width:35px;height:20px;padding:3px;border:1px solid #536267;border-radius:20px;background:#2c3c40;display:flex;align-items:center;justify-content:flex-start;transition:background .16s}.switch>span{width:12px;height:12px;border-radius:50%;background:#c5d4ce;transition:transform .16s}.toggle-row .switch.on{background:#4b807a;border-color:#6eb0a2}.switch.on>span{transform:translateX(15px);background:#eff7e7}.safety-hint{font-size:10px;color:#b6a782;line-height:1.55;margin-top:13px}.playback{padding:17px 20px 19px;border-top:1px solid var(--stroke);background:#142329;flex-shrink:0}.playback-label{display:flex;justify-content:space-between;color:#8baba6;font-size:10px;letter-spacing:.08em;margin-bottom:11px}.playback-label span{font-variant-numeric:tabular-nums;color:#d6e5d6}.playback-buttons{display:flex;gap:8px}.primary-button,.secondary-button{height:39px;border-radius:4px;border:1px solid #7ca9a0;font-size:11px;font-weight:800;letter-spacing:.07em}.primary-button{background:#a8cdc1;color:#122527;flex:1}.primary-button:hover{background:#c3e4d7}.secondary-button{background:#1e3137;color:#bfd2cd;padding:0 14px}.secondary-button:hover{background:#28444a}.speed-row{display:flex;align-items:center;gap:6px;margin-top:13px}.speed-row>span{font-size:10px;color:#748f8d;margin-right:auto;letter-spacing:.07em}.speed{min-width:38px;padding:4px 5px;border:1px solid #354d51;background:transparent;border-radius:4px;color:#8ba9a6;font-size:10px}.speed.active{color:#e1eee6;background:#375954;border-color:#74ada3}.main-column{min-width:0;display:flex;flex-direction:column;background:#0c171b}.viewport-wrap{min-height:540px;display:flex;flex-direction:column;flex:1}.viewport-top{padding:16px 23px 15px;display:flex;justify-content:space-between;align-items:center;height:76px;flex-shrink:0}.overline{color:#789995;letter-spacing:.17em;font-size:9px;font-weight:750;margin-bottom:4px}.viewport-top strong{font-size:15px;font-weight:560;letter-spacing:-.01em}.separator{color:#637e7d;margin:0 3px}.viewport-tools{display:flex;gap:6px}.viewport-tools button{background:#1c2e32;border:1px solid #31474c;border-radius:4px;color:#b9cac5;width:31px;height:31px;font-size:17px}.viewport{position:relative;flex:1;min-height:430px;overflow:hidden;background:linear-gradient(#91b1b3,#bdc7b0 68%,#96a693);isolation:isolate}#sceneCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;position:absolute;inset:0}#sceneCanvas:active{cursor:grabbing}.viewport-vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#132e34a1 0%,transparent 16%,transparent 80%,#0c253459 100%),linear-gradient(180deg,#1f434f4d 0%,transparent 22%,transparent 74%,#10232989 100%)}.mini-compass{position:absolute;top:22px;right:22px;width:48px;height:48px;border:1px solid #e4ecdb6e;border-radius:50%;display:flex;justify-content:center;align-items:center;background:#152b32ad;color:#deebe3;pointer-events:none}.mini-compass span{position:absolute;top:-15px;font-size:10px;letter-spacing:.1em}.compass-needle{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:22px solid #e1b26b;transform-origin:center 21px;filter:drop-shadow(0 1px 2px #1117)}.hotspots{position:absolute;inset:0;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;background:#15282edc;border:1px solid #a7c1adad;box-shadow:0 5px 13px #101d1c55;color:#ebf3e8;border-radius:4px;padding:5px 5px 5px 9px;font-size:9px;font-weight:750;letter-spacing:.06em;white-space:nowrap}.hotspot span{background:#80aea6;color:#102526;font-size:13px;font-weight:500;width:16px;height:16px;line-height:13px;border-radius:2px}.hotspot:hover,.hotspot.active{border-color:#f8dea5;color:#f8dea5;background:#25383a}.hotspot[hidden]{display:none}.viewport-caption{pointer-events:none;position:absolute;bottom:20px;left:22px;right:22px;display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.09em;color:#e9f3df;text-shadow:0 1px 5px #102529}.viewport-caption b{padding:0 6px}.scenecue{background:#152b2ab6;padding:7px 9px;border:1px solid #6e999273;border-radius:3px}.scene-error{position:absolute;inset:20%;display:flex;align-items:center;justify-content:center;background:#102126ed;color:#f2d5b4;text-align:center;padding:20px;border:1px solid #8a6960;line-height:1.6}.scene-error[hidden]{display:none}.viewbar{height:58px;padding:0 19px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #2b3b40;background:#142329;flex-shrink:0}.view-label{color:#758f8c;font-size:10px;font-weight:750;letter-spacing:.1em}.view-buttons{display:flex;gap:5px;flex-wrap:wrap}.view{border:1px solid transparent;background:transparent;color:#819c9a;padding:8px 10px;border-radius:3px;font-size:10px;letter-spacing:.03em}.view.active{border-color:#547973;color:#d2e7de;background:#294640}.view:hover{color:#e0ece5}.view-scale{margin-left:auto;color:#5f7e7a;font-size:9px;white-space:nowrap;letter-spacing:.08em}.telemetry{min-height:136px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #25373d;background:#112025}.metric{padding:22px 19px;border-right:1px solid #2d3e43}.metric:last-child{border-right:0}.metric-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.09em;color:#81a29d;white-space:nowrap}.metric-label span{font-family:Georgia,serif;text-transform:none;color:#69827e}.metric-value{font-variant-numeric:tabular-nums;margin-top:5px;color:#edf0e8;font-size:28px;letter-spacing:-.055em;font-weight:520;white-space:nowrap}.metric-value small{font-size:12px;font-weight:450;letter-spacing:0;color:#9bb4b0;margin-left:3px}.metric-foot{font-size:10px;color:#809998;margin-top:1px;white-space:nowrap}.metric-indicator{display:inline-block;width:5px;height:5px;background:#a4cfa4;border-radius:50%;margin-right:4px}.insights-scroll{padding:16px 19px}.status-card{padding:15px;background:#1d3435;border:1px solid #375c57;border-left:3px solid #9ccd9e;border-radius:3px}.status-card[data-status="high"],.status-card[data-status="caution"],.status-card[data-status="backflow"]{border-left-color:#e3bf79}.status-card[data-status="critical"]{border-left-color:#df8270}.status-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.11em;font-weight:750;color:#9bbdb5}.status-dot{height:6px;width:6px;background:#a5d4a4;border-radius:50%;box-shadow:0 0 8px #81d3ac}.status-title{margin-top:8px;color:#d9f0d1;font-size:20px;font-weight:600;letter-spacing:.04em}.status-card[data-status="high"] .status-title,.status-card[data-status="caution"] .status-title,.status-card[data-status="backflow"] .status-title{color:#ebca83}.status-card[data-status="critical"] .status-title{color:#f1a08f}.status-card p{font-size:11px;line-height:1.65;color:#aac0ba;margin-top:5px}.insight-section{padding:19px 2px 18px;border-bottom:1px solid var(--stroke2)}.section-title{font-size:10px;letter-spacing:.11em;margin-bottom:14px}.chart-legend{display:flex;gap:15px;color:#a0b3ae;font-size:10px;margin-bottom:3px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{display:inline-block;height:2px;width:16px}.legend-inland{background:#93cab5}.legend-outlet{background:#d9b979}.chart-wrap canvas{display:block;width:100%;height:143px}.chart-bottom{display:flex;justify-content:space-between;color:#587d7c;font-size:10px}.flow-line{display:flex;justify-content:space-between;gap:6px;padding:8px 0;border-bottom:1px solid #263b40;font-size:11px;color:#9cb6b2}.flow-line:last-child{border:0}.flow-line strong{font-weight:600;color:#dde5d9;font-variant-numeric:tabular-nums;white-space:nowrap}.feature-name{font-size:16px;font-weight:550;margin-bottom:8px}.feature-section p,.heritage-note p{color:#9aafab;line-height:1.7;font-size:11px;margin-bottom:10px}.feature-section .feature-footnote{color:#8da88d;font-size:10px}.heritage-note .muted,.muted{color:#758b89}.panel-footer{margin-top:auto;display:flex;align-items:center;gap:12px;background:#14282c;border-top:1px solid #294344;min-height:72px;padding:14px 18px;color:#bacdc2;font-size:9px;letter-spacing:.09em}.tiny-symbol{font-size:25px;color:#90b4a5}.panel-footer span:not(.tiny-symbol){display:block;color:#729590;margin-top:3px}.panel-footer b,.app-footer b{padding:0 5px;font-weight:400}.app-footer{flex-shrink:0;min-height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0b161b;border-top:1px solid #2d4145;color:#62807c;font-size:9px;letter-spacing:.07em}dialog{max-width:550px;max-height:90vh;overflow:auto;background:#14272c;color:var(--text);border:1px solid #597773;border-radius:6px;padding:0;box-shadow:0 15px 60px #0009}dialog::backdrop{background:#020b0dcc}.dialog-header{padding:24px 26px;display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #2e4547}.dialog-header h2{font-size:22px;margin-top:5px}.dialog-header button{border:0;background:transparent;font-size:20px;color:#b3c6c1}.dialog-body{padding:22px 26px}.dialog-body p{margin-bottom:14px;color:#b5c9c1;line-height:1.7}.dialog-body strong{color:#e0efe8}.dialog-body kbd{padding:2px 6px;background:#2b4648;border:1px solid #537271;border-radius:3px}.close-button{display:block;margin:0 26px 24px auto;min-width:175px}.status-card[data-status="critical"]{background:#3b2828}.status-card[data-status="high"]{background:#343124}
@media (max-width:1270px){.workspace{grid-template-columns:264px minmax(420px,1fr) 260px}.panel-heading,.control-section{padding-left:16px;padding-right:16px}.insights-scroll{padding-left:12px;padding-right:12px}.view-scale{display:none}.metric{padding:17px 12px}.metric-value{font-size:24px}.metric-label{font-size:9px}.topbar{padding:0 18px}}
@media (max-width:1050px){.workspace{grid-template-columns:250px minmax(400px,1fr)}.insights{grid-column:1/-1;border-left:0;border-top:1px solid var(--stroke)}.insights .panel-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;max-height:none;overflow:visible;padding:12px 22px}.insights .status-card{align-self:start;margin-top:10px}.panel-footer{display:none}.viewport-wrap{min-height:570px}.telemetry{min-height:125px}}
@media (max-width:720px){.topbar{height:70px;padding:0 14px}.top-chip{display:none}.brand h1{font-size:19px}.topbar-right{gap:8px}.chip-live{font-size:8px;padding:7px}.workspace{display:flex;flex-direction:column}.main-column{order:0}.controls{order:1;border-top:1px solid var(--stroke)}.insights{order:2}.panel-heading{height:68px;padding:13px 18px}.controls .panel-scroll{overflow:visible}.viewport-wrap{min-height:0}.viewport-top{padding:11px 13px;height:63px}.viewport-top strong{font-size:12px}.viewport{min-height:350px;height:56vw;max-height:550px;flex:none}.hotspot{font-size:7px;padding:4px}.hotspot span{display:none}.viewport-caption{left:9px;right:9px;bottom:12px;font-size:8px}.viewport-caption>span:last-child{display:none}.viewbar{height:auto;min-height:56px;padding:9px 13px}.view{font-size:9px;padding:8px 5px}.view-label{display:none}.telemetry{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{padding:15px 16px;border-bottom:1px solid #283e40}.controls .panel-scroll{display:grid;grid-template-columns:1fr 1fr}.controls .control-section:first-child{grid-column:1/-1}.controls .control-section{padding:18px}.playback{padding:16px 18px}.insights .panel-scroll{display:block}.app-footer{padding:12px 15px;display:block;font-size:8px}.app-footer span{display:block}}
@media (max-width:490px){.controls .panel-scroll{display:block}.viewport{height:370px;min-height:370px}.scenario{padding:10px}.view-buttons{gap:0}.view{font-size:8px;padding:7px 3px}.metric-value{font-size:24px}.chart-wrap canvas{height:170px}.topbar .brand-mark{display:none}}