:root{color-scheme:dark;--bg:#06131d;--panel:#081823;--line:#203643;--soft:#829eaa;--ink:#e8f4f5;--cyan:#7ae3e6;--gold:#e3c88b}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#030d14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}
.app-shell{min-height:100vh;max-width:1860px;margin:auto;display:flex;flex-direction:column;background:var(--bg);border-left:1px solid #142934;border-right:1px solid #142934}
.topbar{height:76px;padding:0 30px;display:flex;justify-content:space-between;align-items:center;gap:18px;border-bottom:1px solid var(--line);background:#071721}
.brand{display:flex;gap:12px;align-items:center}.brand-mark{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border:1px solid #457e83;color:var(--cyan);transform:rotate(45deg)}.mark-inner{display:inline-block;transform:rotate(-45deg);font-size:30px;font-weight:300}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-copy strong{font-size:14px;letter-spacing:2px}.brand-copy strong span{color:var(--cyan)}.brand-copy small{font-size:8px;color:#67848f;letter-spacing:2.5px}.header-center{letter-spacing:3px;font-size:11px;font-weight:700;color:#a9c3ca}.header-center span{color:var(--gold)}.header-center i{width:4px;height:4px;display:inline-block;background:#58717e;vertical-align:middle;margin:0 10px;transform:rotate(45deg)}.top-actions{display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:1.5px}.live{color:#a3d4cf}.live b,.signal{display:inline-block;width:6px;height:6px;background:#63daba;border-radius:50%;margin-right:8px;box-shadow:0 0 12px #64dbbc}.version{color:#718d98}
.main-layout{display:grid;grid-template-columns:304px minmax(450px,1fr) 286px;min-height:calc(100vh - 117px);flex:1}
.sidebar{background:linear-gradient(170deg,#0b1c27,#071620 70%);padding:28px 25px 20px;border-right:1px solid var(--line);overflow:auto}.section-label{font-size:9px;font-weight:800;letter-spacing:1.9px;color:#7b9ba6;display:flex;justify-content:space-between;align-items:center}.tiny-dot{display:block;width:5px;height:5px;transform:rotate(45deg);background:#6bbbc3;box-shadow:0 0 10px #75c6d9}.hero-copy{margin-top:26px;margin-bottom:29px}.eyebrow{font-size:9px;color:#7fcacf;letter-spacing:2px;font-weight:700}.hero-copy h1{font-weight:450;font-size:37px;line-height:1.10;letter-spacing:-1.4px;margin:12px 0 16px}.hero-copy h1 em{font-family:Georgia,serif;font-weight:400;font-size:41px;color:#bce9e8}.hero-copy p{font-size:11px;color:#92a9b3;line-height:1.85;margin:0}.preset-label{font-size:9px;font-weight:800;letter-spacing:1.8px;color:#8ca6b0;margin-bottom:11px}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:24px}.preset{font-size:10px;padding:10px 4px;border:1px solid #2d4551;background:#0c2430;color:#95b4c0}.preset.active,.preset:hover{border-color:#80dcde;color:#c6f7f2;background:#13323d}.control-group{border-top:1px solid var(--line);padding-top:18px;padding-bottom:5px}.control-group.last{border-bottom:1px solid var(--line);padding-bottom:14px}.group-title{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#91afb7;font-weight:700;margin-bottom:20px}.group-title b{color:#70d4d4;margin-right:8px;font-size:12px}.group-title>span:last-child{color:#4d6a76}.control{margin:0 0 21px}.control-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:11px}.control label{font-size:11px;color:#acc3c9}.control output{font-size:11px;font-variant-numeric:tabular-nums;color:#aff0e8}.control input[type=range]{width:100%;appearance:none;height:3px;vertical-align:middle;background:linear-gradient(90deg,#56bac5 var(--progress,50%),#29424e var(--progress,50%));outline:none;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:50%;border:2px solid #c1f4f1;background:#286675;box-shadow:0 0 0 3px #0f2e37}.control input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:2px solid #c1f4f1;background:#286675}.sidebar-foot{color:#738e98;font-size:9px;line-height:1.8;margin-top:18px}.sidebar-foot .square{color:#7ad0d2;font-size:17px;margin-right:9px}
.stage{min-width:0;display:flex;flex-direction:column;background:#071621}.stage-top{min-height:88px;padding:24px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.stage-eyebrow{color:#9cbcc3;font-size:9px;margin-bottom:8px}.stage-heading{font-size:19px;letter-spacing:-.5px;font-weight:550}.stage-heading span{font-size:9px;letter-spacing:1.8px;color:#6b909e;font-weight:500;margin-left:7px}.stage-controls{display:flex;gap:8px}.stage-controls button{background:#102735;color:#b1d0d5;border:1px solid #2a4552;padding:10px 12px;font-size:11px;letter-spacing:1px}.stage-controls button:hover{background:#164151;border-color:#50aeb6}.stage-controls button span{font-size:9px;margin-left:6px}.viewport{position:relative;flex:1;min-height:470px;margin:0 19px;border:1px solid #2a4855;overflow:hidden;background:radial-gradient(ellipse at 45% 26%,#155566 0,#092634 48%,#05121e 100%)}.viewport canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab;position:absolute;inset:0}.viewport canvas:active{cursor:grabbing}.viewport-vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 48% 49%,transparent 38%,rgba(1,8,17,.55) 100%)}.viewport-top-left,.viewport-top-right{position:absolute;top:20px;font-size:9px;letter-spacing:1.35px;color:#adced3;pointer-events:none}.viewport-top-left{left:20px}.crosshair{font-size:17px;color:var(--cyan);vertical-align:middle;margin-right:8px}.viewport-top-right{right:20px;font-variant-numeric:tabular-nums}.divider-dot{margin:0 8px;color:#718c98}.viewer-bottom-left{position:absolute;bottom:19px;left:20px;display:flex;gap:10px;align-items:center;color:#8eacb9;font-size:9px;line-height:1.9;letter-spacing:1px;pointer-events:none}.viewer-bottom-left strong{font-weight:500;color:#b6d9d9}.coord-icon{border:1px solid #507a84;border-radius:50%;width:31px;height:31px;display:flex;align-items:center;justify-content:center;color:#a5dfe1;font-size:19px}.separator{margin:0 5px}.viewer-bottom-right{position:absolute;bottom:24px;right:17px;font-size:9px;color:#b7d4d6;letter-spacing:1px}.toggle{display:flex;align-items:center;cursor:pointer;gap:10px}.toggle input{position:absolute;opacity:0}.toggle span{width:28px;height:14px;border-radius:12px;border:1px solid #4a8e92;background:#13343f;position:relative}.toggle span:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:#68d7d4;top:2px;left:16px;transition:transform .2s}.toggle input:not(:checked)+span:after{transform:translateX(-14px);background:#67828b}.toggle input:focus-visible+span{outline:2px solid white;outline-offset:2px}
.stage-bottom{padding:19px 19px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.stat{padding:17px 17px 18px;background:#0b222e;border:1px solid #1a3542;min-width:0}.stat>span{font-size:9px;color:#86a7b2;letter-spacing:1px;line-height:1.4;display:block;min-height:28px}.stat small{font-size:8px;color:#5d828e;letter-spacing:0}.stat strong{display:block;font-size:27px;font-weight:450;line-height:1.5;letter-spacing:-1px;font-variant-numeric:tabular-nums}.stat-line{width:43px;height:2px;margin-top:7px;background:#60d3d4}.stat-line.blue{background:#8db9ef}.stat-line.teal{background:#44bb9b}.stat-line.muted{background:#617d8b}.caption-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 22px 21px;color:#65818e;font-size:8px;letter-spacing:1.05px}.caption-bottom b{font-size:15px;vertical-align:middle;margin-right:8px;color:#65bac6}.caption-bottom>span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:#a5d3d2}
.inspector{padding:28px 24px 20px;border-left:1px solid var(--line);background:linear-gradient(155deg,#0a1d28,#071822);overflow:auto}.inspector-title{font-size:14px;font-weight:600;margin-top:28px;margin-bottom:8px}.inspector-desc{font-size:10px;line-height:1.7;color:#8ca6b1;margin-bottom:19px}.map-wrap{position:relative;border:1px solid #2a5460;padding:13px;background:#0a2330;aspect-ratio:1}.map-wrap canvas{display:block;width:100%;height:100%;background:#072331;image-rendering:auto}.map-corner{position:absolute;color:#65c6cf;font-size:13px}.tl{top:4px;left:4px}.tr{top:4px;right:4px}.bl{bottom:4px;left:4px}.br{bottom:4px;right:4px}.map-label{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:8px;white-space:nowrap;color:#cae3e8;background:#0a2330ac;padding:3px}.legend{display:flex;align-items:center;gap:9px;margin-top:11px;color:#7295a1;font-size:8px;letter-spacing:.65px}.legend-bar{height:3px;flex:1;background:linear-gradient(90deg,#072b4c,#149cba,#75ece7,#ffffdc)}.inspector-divider{height:1px;background:var(--line);margin:25px 0 0}.readout{display:flex;justify-content:space-between;gap:7px;border-bottom:1px solid #203543;padding:12px 0;color:#84a4ae;font-size:10px}.readout strong{color:#c2e4e4;font-size:10px;font-variant-numeric:tabular-nums}.unit{float:right;color:#537987;font-size:9px;font-weight:400}.inspector canvas#history{width:100%;height:106px;display:block;margin-top:12px}.chart-bottom{display:flex;justify-content:space-between;font-size:8px;color:#648490;letter-spacing:1px}.science-note{padding:13px 12px;background:#102c37;border-left:2px solid #75d5d3;display:flex;gap:10px;margin-top:25px}.science-note>span{color:#71d9dc;font-size:16px}.science-note strong{font-size:10px;color:#c4e6e5}.science-note p{font-size:9px;line-height:1.7;margin:6px 0 0;color:#8eabb5}.quality-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:22px;font-size:9px;letter-spacing:1px;color:#91b0b8}.quality-row select{border:1px solid #335562;padding:7px 5px;color:#a7d3d9;background:#0e2b37;font-size:9px;max-width:148px}.footer{height:41px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-top:1px solid var(--line);background:#06141d;color:#577684;font-size:8px;letter-spacing:1.4px;gap:16px}.footer i{color:#57b9bd;font-style:normal;margin:0 6px}.error{position:fixed;left:50%;top:30px;transform:translateX(-50%);z-index:99;max-width:90vw;width:600px;padding:20px;background:#3c1b28;color:#ffd9dd;border:1px solid #bd6578;box-shadow:0 18px 100px #0009;font-size:13px;white-space:pre-wrap}
@media(max-width:1360px){.main-layout{grid-template-columns:265px minmax(380px,1fr) 240px}.sidebar{padding:23px 18px}.inspector{padding:23px 17px}.stage-top{padding:20px}.viewport{margin:0 12px}.stage-bottom{gap:6px;padding:12px}.stat{padding:10px}.stat strong{font-size:23px}.stage-heading span{display:none}}
@media(max-width:1050px){.main-layout{grid-template-columns:264px minmax(0,1fr)}.inspector{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);column-gap:24px;align-content:start}.inspector>.section-label{grid-column:1/-1}.inspector .inspector-title{margin-top:20px}.map-wrap{grid-column:1;grid-row:3 / span 4;max-width:280px}.legend{grid-column:1}.inspector-divider{display:none}.readout,.science-note,.quality-row,#history,.chart-bottom{grid-column:2 / span 2}.inspector-desc{grid-column:1}.viewport{min-height:420px}}
@media(max-width:710px){.topbar{padding:0 14px;height:65px}.header-center,.version{display:none}.main-layout{display:flex;flex-direction:column}.stage{order:0}.sidebar{order:1;border-right:0;border-top:1px solid var(--line)}.inspector{order:2;display:block}.map-wrap{max-width:360px}.stage-top{min-height:75px;padding:13px}.stage-heading{font-size:17px}.stage-controls button{padding:9px}.stage-controls button span{display:none}.viewport{min-height:390px;margin:0 8px}.viewport-top-right{display:none}.viewer-bottom-right{bottom:56px;right:11px}.stage-bottom{grid-template-columns:1fr 1fr;gap:6px}.caption-bottom{flex-direction:column;align-items:flex-start;padding:4px 15px 16px;line-height:1.6}.footer{font-size:7px;padding:0 14px}.footer span:last-child{display:none}.hero-copy{margin-top:20px}.control-group{max-width:680px}.inspector-title{margin-top:24px}.inspector-divider{display:block}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}