:root{color-scheme:dark;--bg:#07111d;--panel:#0b1a2a;--line:#22384c;--text:#e4f3fa;--quiet:#7999af;--teal:#45d9df;--coral:#ff9179}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}body{font-family:Inter,'Segoe UI',Arial,sans-serif;letter-spacing:.01em}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #6ae9e7;outline-offset:3px}
.app-shell{max-width:1920px;margin:0 auto;padding:0 24px}.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #1b3045}.brand{display:flex;align-items:center;gap:16px}.brand-icon{height:38px;width:38px;border:1px solid #2a8591;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:3px;transform:rotate(-14deg);background:linear-gradient(145deg,#123d4e,#102239)}.brand-icon span{height:19px;width:3px;border-radius:3px;background:#6de5d9;transform:skewY(-22deg)}.brand-icon span:nth-child(2){height:27px;background:#68aede}.brand-icon span:nth-child(3){height:14px}.eyebrow{font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.22em;color:#7c9eaf;margin-bottom:5px}.slash{color:#3bc9d2;margin:0 4px}.brand-name{font-size:23px;letter-spacing:.095em;font-weight:760}.brand-light{font-weight:390;color:#66dfe0}.head-center,.system-status,.section-overline,.breadcrumb,.stage-top-right,.tiny-heading,.tiny-muted,.plot-head,.preset-header,.control-note,.vp-time,.viewhint,.camera-btn,.metric>span,.metric small,.stage-footer,.app-footer,.mini-readouts,.export-btn,.flow-badge{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.head-center{font-size:10px;letter-spacing:.17em;color:#89a8b8}.head-sep{padding:0 8px;color:#3d596d}.pulse,.live-dot{width:7px;height:7px;border-radius:50%;background:#48e0bb;display:inline-block;box-shadow:0 0 12px #48e0bb;vertical-align:middle;margin-right:8px}.system-status{font-size:10px;letter-spacing:.13em;border:1px solid #375368;border-radius:4px;padding:10px 12px;color:#95acba}.system-status.online{border-color:#2b766f;background:#102d2d;color:#54e4c5}
.workspace{display:grid;grid-template-columns:minmax(243px,280px) minmax(450px,1fr) minmax(245px,284px);gap:14px;padding-top:22px;align-items:stretch}.panel{border:1px solid var(--line);background:linear-gradient(155deg,#0e1e2f,#091827);border-radius:8px;padding:25px 21px}.section-overline{color:#4ac8d2;letter-spacing:.18em;font-size:10px;font-weight:bold}.panel h2{font-size:23px;letter-spacing:-.045em;margin:13px 0 9px;font-weight:670}.muted{color:#91a9b8}.intro{font-size:12px;line-height:1.65;margin:0 0 24px}.preset-header{font-size:10px;letter-spacing:.16em;color:#668ba0;margin-bottom:10px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:29px}.preset{font:700 9px ui-monospace,monospace;letter-spacing:.02em;background:#12273a;border:1px solid #2b4557;color:#85a6b8;border-radius:4px;padding:11px 3px;white-space:nowrap}.preset:hover,.preset.selected{color:#75f4ea;background:#17434b;border-color:#3cb8bd}.control{margin-bottom:23px}.control-name{display:flex;justify-content:space-between;align-items:center;gap:7px;margin-bottom:11px;font-size:12px}.control-name label{color:#c0d2df}.control-name output{color:#69e5e3;font:600 11px ui-monospace,monospace;white-space:nowrap}input[type=range]{display:block;width:100%;height:4px;border-radius:4px;accent-color:#58d6d8;cursor:pointer}.panel-divide{border-top:1px solid #1b364a;margin:24px 0}.actions{display:flex;gap:7px;margin-top:29px}.actions button{padding:13px 8px;border-radius:5px;font-size:12px;font-weight:700}.actions .primary{flex:1;border:1px solid #60e6e5;color:#061b24;background:#60dcdc}.actions .secondary{flex:1;border:1px solid #365265;color:#c5d8e2;background:#14283a}.control-note{margin:18px 0 0;font-size:10px;line-height:1.6;color:#64869c}
.stage{min-width:0;display:flex;flex-direction:column;gap:0}.stage-top{height:49px;display:flex;justify-content:space-between;align-items:center;padding:0 3px}.breadcrumb,.stage-top-right{font-size:10px;letter-spacing:.115em;color:#83a4b6}.breadcrumb span{color:#2e637c;margin:0 5px}.stage-top-right{white-space:nowrap}.vertical-sep{color:#416477;padding:0 7px}.viewport{position:relative;min-width:0;flex:1;min-height:490px;overflow:hidden;border:1px solid #27465e;border-radius:7px;background:radial-gradient(ellipse at 50% 40%,#1a3c54 0%,#0a182a 66%,#07101d 100%)}#three-canvas{position:absolute;width:100%;height:100%;left:0;top:0;touch-action:none;cursor:grab}#three-canvas:active{cursor:grabbing}.viewport-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,14,24,.52) 0%,transparent 33%,transparent 67%,rgba(5,14,24,.34) 100%)}.viewport-left,.viewport-right,.viewport-bottom{position:absolute;z-index:1;pointer-events:none}.viewport-left{top:25px;left:23px}.viewport-right{top:25px;right:23px;text-align:right}.tiny-heading{font-size:10px;font-weight:bold;letter-spacing:.16em;color:#8cbbc8;margin-bottom:13px}.key{font:12px ui-monospace,monospace;margin:9px 0;color:#c5dce8}.swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;box-shadow:0 0 9px currentColor}.teal{background:#4dd9eb;color:#4dd9eb}.coral{background:#ff907b;color:#ff907b}.tiny-muted{font-size:10px;color:#718fa3;margin-top:12px}.vp-time{font-size:24px;font-weight:700;color:#eafaff;letter-spacing:-.045em}.flow-badge{display:inline-block;margin-top:10px;color:#8ce2dc;border:1px solid #2c6969;background:#102a37;border-radius:3px;padding:6px 8px;font-size:9px;letter-spacing:.08em}.flow-badge[data-strength=high]{color:#ffac8d;border-color:#8d5942}.flow-badge[data-strength=low]{color:#abc6d2;border-color:#496272}.viewport-bottom{bottom:19px;left:21px;right:21px;display:flex;align-items:center;justify-content:space-between;gap:10px}.viewhint{color:#95b5c3;font-size:10px;letter-spacing:.09em}.mouse-icon{color:#7bdfdb;font-size:16px}.camera-btn{pointer-events:auto;font-size:10px;font-weight:700;letter-spacing:.03em;background:rgba(12,37,54,.85);color:#9dd9e0;border:1px solid #3a687c;border-radius:4px;padding:11px 13px}.camera-btn:hover{background:#1c4a5b}.canvas-error{position:absolute;z-index:3;left:18px;right:18px;top:45%;padding:20px;background:#341b20;border:1px solid #b16c65;color:white;border-radius:5px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#0d2030;border:1px solid #25455a;border-top:none;border-radius:0 0 7px 7px;padding:19px 8px 20px}.metric{padding:0 16px;border-right:1px solid #27465a;min-width:0}.metric:last-child{border:0}.metric>span{font-size:9px;letter-spacing:.12em;color:#7ea6b8;white-space:nowrap}.metric>div{font-size:30px;line-height:1.34;color:#e5f6fc;font-weight:730;font-variant-numeric:tabular-nums;margin-top:7px}.metric.hot>div{color:#60e3da}.metric small{display:block;font-size:9px;line-height:1.5;color:#6e91a5;margin-top:6px}.stage-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:15px 2px;color:#627f91;font-size:9px;letter-spacing:.1em}.small-ring{width:7px;height:7px;display:inline-block;border:1px solid #4cbdc1;border-radius:50%;margin-right:8px}
.analysis-panel h2{margin-bottom:10px}.plot-head{display:flex;align-items:center;justify-content:space-between;margin:26px 0 14px;gap:5px;color:#c3dce4;font-size:10px;font-weight:bold;letter-spacing:.07em}.plot-tag{display:inline-block;margin-right:6px;background:#143848;border:1px solid #2f6371;color:#62d6db;border-radius:3px;font-size:9px;padding:5px 7px}.plot-head .tiny-muted{margin-top:0}.cross-canvas{width:100%;height:190px;display:block;background:#091928;border:1px solid #244255;border-radius:4px}.map-legend{display:flex;justify-content:space-between;margin:9px 3px 0;font:10px ui-monospace,monospace;color:#8da9b9}.map-legend .swatch{width:7px;height:7px}.chart-head{margin-top:28px}.chart-canvas{width:100%;height:178px;display:block;background:#091928;border:1px solid #244255;border-radius:4px}.mini-readouts{border-top:1px solid #274357;margin-top:24px;padding-top:5px}.mini-readouts>div{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-bottom:1px solid #193447}.mini-readouts span{font-size:9px;color:#7898aa;letter-spacing:.075em}.mini-readouts strong{font-size:12px;color:#d5edf5;font-weight:650}.export-btn{margin-top:24px;width:100%;display:flex;align-items:center;justify-content:space-between;border:1px solid #3b7b85;background:#123442;padding:14px 14px;border-radius:4px;color:#7fe4e5;font-size:10px;letter-spacing:.09em;font-weight:bold}.export-btn:hover{background:#184655}.arrow{font-size:15px}.app-footer{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:22px 3px 28px;color:#678697;font-size:9px;letter-spacing:.12em}.subtle{color:#3e596b;margin:0 4px}
@media(max-width:1280px){.app-shell{padding:0 14px}.workspace{grid-template-columns:235px minmax(320px,1fr) 240px;gap:9px}.panel{padding:22px 15px}.metric{padding:0 8px}.metric>span{font-size:8px}.metric>div{font-size:25px}.metric small{font-size:8px}.head-center{display:none}.viewport{min-height:500px}}
@media(max-width:1040px){.workspace{grid-template-columns:minmax(235px,275px) minmax(300px,1fr)}.analysis-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;column-gap:25px}.analysis-panel>.section-overline,.analysis-panel>h2,.analysis-panel>.intro{grid-column:1/-1}.analysis-panel .plot-head{margin-top:12px}.cross-canvas,.chart-canvas{height:190px}.analysis-panel .map-legend{grid-column:1}.analysis-panel .chart-head{grid-column:2;grid-row:4}.analysis-panel .chart-canvas{grid-column:2;grid-row:5}.mini-readouts{grid-column:1/-1}.export-btn{grid-column:1/-1}.stage{grid-column:2}.viewport{min-height:520px}.metric{padding:0 6px}.metric>span{white-space:normal}}
@media(max-width:720px){.app-shell{padding:0 11px}.masthead{height:83px}.brand-name{font-size:19px}.system-status{font-size:8px;padding:8px}.workspace{display:flex;flex-direction:column}.stage{order:0}.control-panel{order:1}.analysis-panel{order:2;display:block}.viewport{min-height:440px}.metrics{padding:17px 4px}.metric{padding:0 7px}.metric>div{font-size:23px}.metric>span{font-size:8px}.metric small{font-size:8px}.viewport-left{left:13px;top:18px}.viewport-right{right:13px;top:18px}.vp-time{font-size:18px}.viewport-bottom{left:13px;right:13px;bottom:13px}.viewhint{font-size:8px}.camera-btn{font-size:8px;padding:8px}.panel{padding:20px}.app-footer{display:block;line-height:2}.analysis-panel .plot-head{margin-top:25px}.analysis-panel .cross-canvas{height:210px}.analysis-panel .chart-canvas{height:190px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}