:root{color-scheme:dark;--bg:#080f19;--surface:#0e1c2a;--text:#e3eff4;--muted:#9badb9;--cool:#9be2ed;--line:rgba(157,202,222,.22);--warm:#f4ae68;--rail:clamp(174px,13.4vw,248px);font:14px/1.4 "Segoe UI","Microsoft YaHei UI","PingFang SC",sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,select,a{font:inherit;color:inherit}button,select{cursor:pointer}button{border:0;background:none}a{text-decoration:none}button:hover,a:hover{color:var(--cool)}button:focus-visible,a:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #91dce9;outline-offset:2px}button:disabled{opacity:.42;cursor:default}
button i:has(svg),i[data-icon]{display:inline-flex;font-style:normal;align-items:center;flex:none}i svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
#workbench{height:100vh;height:100dvh;display:grid;grid-template-rows:60px minmax(0,1fr) 45px;overflow:hidden}
.top,footer{background:#0a1420;display:flex;align-items:center;position:relative;z-index:6}.top{border-bottom:1px solid var(--line);padding:0 clamp(12px,1.55vw,32px);justify-content:space-between;gap:18px}
.identity,.topend,.brand,.views,.scene-id,.scene-summary,.stage-meta,.mode-buttons,.navtools,.tape-heading,.quality-row,.dialog-head,.panel-head,.row,.selection-head{display:flex;align-items:center}
.identity{gap:17px}.brand{gap:9px;font-weight:680;font-size:19px;letter-spacing:.035em;color:#e8f1f6}.brand svg{width:21px;height:25px}.product{border-left:1px solid var(--line);padding-left:16px;color:#8ba8b9;font-size:11px;white-space:nowrap}.iconbtn{width:30px;height:30px;display:inline-grid;place-content:center;padding:0;flex:none}
.views{align-self:stretch;gap:24px}.views button{display:flex;align-items:center;gap:8px;align-self:stretch;border-bottom:2px solid transparent;color:#96acba;font-size:13px}.views button[aria-pressed=true]{border-bottom-color:#8ddce8;color:#e6f9fc}
.topend{gap:18px;font-variant-numeric:tabular-nums;color:#b6c8d2}#clock{font:12px Consolas,monospace}
select{background:#102331;color:#dcebf0;border:1px solid #344e60;border-radius:3px;padding:5px 6px;max-width:100%}.topend select{font-size:12px;background:#0e1d2a}.wide{width:100%;font-size:12px;padding:7px}
#stage{position:relative;min-height:0;overflow:hidden;background:#060d18;isolation:isolate}#scene,.vignette{position:absolute;inset:0}#scene canvas,#scene>svg{display:block;width:100%;height:100%;touch-action:none}.vignette{pointer-events:none;background:linear-gradient(180deg,#050c165e,transparent 23%,transparent 81%,#050c164f),linear-gradient(90deg,#08132260,transparent 24%,transparent 76%,#08132245)}
.scene-caption,.stage-meta,.scene-hint{pointer-events:none;position:absolute}.scene-caption{left:clamp(16px,2vw,39px);top:clamp(18px,3.5vh,44px);text-shadow:0 1px 12px #020910}.scene-id{gap:8px;font:10px/1.2 Consolas,monospace;letter-spacing:.15em;color:#a3c7d6}.scene-id i{height:2px;width:20px;background:#98dce6}.scene-caption h1{font-size:clamp(26px,2.4vw,43px);font-weight:560;letter-spacing:.01em;line-height:1.15;margin:8px 0}.scene-summary{color:#a6bac6;font-size:12px;gap:10px}.stage-meta{right:clamp(16px,2vw,39px);top:clamp(24px,3.9vh,47px);font-size:11px;gap:7px;color:#c3d4de;background:#091420b5;border:1px solid var(--line);padding:5px 9px}.signal-dot,.status-lamp{width:6px;height:6px;border-radius:100%;background:#8ed6d5;display:inline-block}.stage-meta #engine{border-left:1px solid var(--line);padding-left:7px;color:#95a8b7}
.panel{position:absolute;top:clamp(126px,20%,220px);width:var(--rail);z-index:3;border:1px solid var(--line);border-top-color:#729aae;background:linear-gradient(125deg,rgba(18,35,49,.91),rgba(8,21,35,.84));box-shadow:0 6px 25px #01080e3b;backdrop-filter:blur(8px);color:#dfe9ef;max-height:calc(100% - 152px);display:flex;flex-direction:column}.panel:before{position:absolute;content:"";left:-1px;top:-1px;width:22px;height:2px;background:#a2e1ec}
.panel.left{left:clamp(12px,1.6vw,31px)}.panel.right{right:clamp(12px,1.6vw,31px)}.panel-head{padding:6px 8px;min-height:39px;gap:6px;border-bottom:1px solid var(--line);touch-action:none;cursor:grab;user-select:none}.panel-head:active{cursor:grabbing}.panel-head strong{font-size:13px;font-weight:590;flex:1}.grip{color:#7596a7;font-size:16px}.panel-head button{color:#9eb9c9;width:24px;height:24px}.panel-body{padding:12px 13px;overflow:auto;scrollbar-width:thin;scrollbar-color:#395565 transparent}
.panel.folded{width:auto;min-width:unset}.folded .panel-body,.folded .grip{display:none}.folded .panel-head{border:0;padding:5px 8px}.folded .panel-head i{transform:rotate(180deg)}.panel.left.folded,.panel.right.folded{background:#0a1928db}
.field-heading{display:block;color:#a3b9c7;font-size:11px;margin:0 0 6px}.mode-buttons{gap:7px;margin-top:7px}.mode-buttons button,.navtools button,.action,.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #426070;background:#142b3b;border-radius:3px;font-size:12px;padding:4px 8px}.mode-buttons button:first-child{flex:1}.mode-buttons .iconbtn{width:30px;height:27px}.mode-buttons i svg,.navtools i svg{width:14px;height:14px}.group,.quality-row{margin-top:13px;border-top:1px solid var(--line);padding-top:11px}#layers{display:flex;flex-wrap:wrap;gap:4px}.pill{background:#0b1925;color:#9caebb;padding:3px 6px;font-size:11px}.pill[aria-pressed=true]{color:#a4e2eb;border-color:#3f7280;background:#14323c}.quality-row{justify-content:space-between;gap:5px;font-size:11px;color:#acc0cd}.quality-row select{padding:2px 3px;font-size:11px}
.row{justify-content:space-between;gap:8px;padding:4px 0;font-size:12px}.row span{color:#a8bdc9}.row b{font-weight:550;font-variant-numeric:tabular-nums}.waveform{display:block;width:100%;height:34px;margin:8px 0;color:#81cbd9}.tiny-bars{display:grid;gap:7px}.proto{display:grid;grid-template-columns:36px 1fr 32px;align-items:center;gap:6px;color:#a6becb;font-size:10px;font-variant-numeric:tabular-nums}.proto span:last-child{text-align:right}.proto i{height:3px;background:#233b4a}.proto b{display:block;height:100%;background:#65b2c8}.link{display:block;color:var(--cool);font-size:12px;margin-top:8px}.action{margin-top:6px;max-width:100%;text-align:left;justify-content:flex-start}.selection-head{gap:5px;justify-content:space-between;margin-bottom:5px}.selection-head strong{font-size:14px;overflow-wrap:anywhere}.objectlinks{display:flex;flex-wrap:wrap;gap:4px}.objectlinks button{font:10px Consolas,monospace;color:#bad5df;border:1px solid #355062;padding:3px 4px}.status-lamp{margin-right:6px}.threat .status-lamp,.threat.signal-dot{background:var(--warm)}.alerttext{color:var(--warm)}
#callout{position:absolute;pointer-events:none;z-index:2;margin-left:12px;transform:translateY(-105%);padding:4px 8px;background:rgba(8,24,36,.9);border-left:2px solid #94dce7;font:11px Consolas,monospace;color:#c5eefa}#callout b{margin-left:8px;color:#fff}
.instruments{position:absolute;left:clamp(12px,1.6vw,31px);bottom:16px;width:min(46%,540px)}.navtools{position:absolute;right:clamp(14px,1.6vw,31px);bottom:28px;gap:5px}.navtools button{height:31px;background:#0b1c2ae8}.navtools button[aria-pressed=true]{color:#a1e6f0;border-color:#82b6c3}.scene-hint{right:clamp(14px,1.6vw,31px);bottom:7px;color:#a1b4c4;font-size:10px;text-shadow:0 1px 4px #020811}
footer{padding:0 clamp(12px,1.6vw,31px);border-top:1px solid var(--line);gap:15px;overflow:hidden}.tape-heading{gap:7px;font-size:12px;white-space:nowrap}.tape-heading i{color:var(--cool)}#events{display:flex;flex:1;gap:15px;overflow:hidden;align-items:center}.ev{white-space:nowrap;display:inline-flex;gap:8px;align-items:center;text-align:left;padding:4px 8px 4px 0;font-size:11px}.ev time{font:10px Consolas,monospace;color:#8ea9b8}.ev b{width:5px;height:5px;background:#7dc0d2;transform:rotate(45deg)}.ev[data-phase=threat] b{background:#efa15b}.ev[data-phase=recovery] b{background:#8cc6a7}
dialog{color:var(--text);background:#10202e;border:1px solid #526d7e;border-top:2px solid #91d1dc;max-width:calc(100vw - 24px);width:650px;max-height:78dvh;padding:16px 20px;box-shadow:0 15px 70px #0009}dialog::backdrop{background:#030a12a8}.dialog-head{justify-content:space-between}.dialog-head h2{font-size:18px;font-weight:550}.modules-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.modules-grid h3{font-weight:500;font-size:12px;color:#93b3c3}.modules-grid a{display:block;padding:6px 0;font-size:13px}.module-foot{border-top:1px solid var(--line);margin-top:12px;padding-top:9px}.log-entry{border-top:1px solid var(--line);padding:8px 0}.log-entry a{margin-left:14px;color:var(--cool)}
#stage.physical .scene-caption,#stage.physical .scene-hint{color:#183541;text-shadow:0 1px 6px #fff}#stage.physical :is(.scene-id,.scene-summary){color:#264653}.fallback-label{font:13px 'Segoe UI',sans-serif;fill:#daecf5}
@media(max-height:760px) and (min-width:761px){#workbench{grid-template-rows:49px minmax(0,1fr) 38px}.panel{top:108px;max-height:calc(100% - 205px)}.scene-caption{top:15px}.panel-body{padding:8px 11px}.group,.quality-row{margin-top:8px;padding-top:7px}.instruments{bottom:6px}.scene-caption h1{font-size:28px}}
@media(max-width:900px){:root{--rail:172px}.identity{gap:8px}.top{gap:8px}.product{display:none}.views{gap:8px}.topend{gap:5px}.instruments{width:48%}.top .brand{font-size:16px}}
@media(max-width:680px){#workbench{grid-template-rows:48px minmax(0,1fr) 36px}#clock,.scene-hint,.product,.views i,.grip,.scene-summary{display:none}.top{padding:0 7px}.brand{font-size:12px!important;gap:4px}.brand svg{width:15px}.topend select{max-width:66px;font-size:10px}.views{gap:3px}.views button{padding:0 4px;font-size:11px}.identity{gap:2px}.iconbtn{width:24px}.scene-caption{left:12px;top:16px}.scene-caption h1{font-size:25px}.stage-meta{right:8px;top:20px;font-size:9px}.panel{top:94px;max-height:calc(100% - 220px);width:min(46vw,200px)}.panel.left{left:8px}.panel.right{right:8px}.panel-head strong{font-size:12px}.panel-body{padding:8px}.instruments{left:8px;right:8px;width:auto;bottom:2px}.navtools{bottom:85px;right:8px}.tape-heading strong{display:none}.modules-grid{gap:6px}.modules-grid a{font-size:11px}.scene-id{font-size:9px}}
[hidden]{display:none!important}
.atlas-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.atlas-city{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;pointer-events:auto;white-space:nowrap;padding:2px 5px 3px;border:1px solid #47657785;border-left:2px solid #7bcace;border-radius:2px;color:#e0edf0;background:#0b1b28eb;line-height:1.25;font-size:11px;box-shadow:0 2px 5px #06111b85}
.atlas-city small{color:#8ccbd2;font:9px/1.2 Consolas,monospace;letter-spacing:.04em}
.atlas-city[data-muted=true]{opacity:.44}.atlas-city:hover,.atlas-city[aria-pressed=true]{color:#fff;border-color:#a2eef0;opacity:1}
.atlas-mode .panel.folded{top:clamp(112px,15%,150px)}.atlas-mode .vignette{background:linear-gradient(180deg,#050c162b,transparent 20%,transparent 80%,#050c162e)}
@media(max-width:680px){.views button{font-size:10px;padding:0 3px}.top{gap:3px}.views{gap:1px}.atlas-mode .panel.folded{top:94px}.atlas-city{font-size:10px;gap:3px;padding:2px 3px}.atlas-city small{font-size:8px}.atlas-mode .scene-summary{display:block;font-size:11px}.atlas-mode .stage-meta{top:16px}}
@media(max-width:410px){.views i,.top .brand svg{display:none}.identity{gap:0}.brand{font-size:11px!important}.topend select{max-width:57px}}
.atlas-samples{display:none}
@media(max-width:680px) and (min-height:745px){
 .atlas-mode .atlas-samples{display:block;position:absolute;bottom:122px;left:14px;right:14px;padding:6px 8px;background:linear-gradient(90deg,#0c1e2be8,#0a18238a);border-left:1px solid #476976}
 .atlas-samples h2{font-size:11px;font-weight:550;color:#8abac6;margin:0 0 3px}
 #atlas-sample-links button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 1px;font-size:11px}
 #atlas-sample-links button+button{border-top:1px solid #243845}#atlas-sample-links b{font-weight:500;font-variant-numeric:tabular-nums;color:#97dbe2}
 .atlas-mode:has(.panel:not(.folded)) .atlas-samples,.atlas-mode:has(#callout:not([hidden])) .atlas-samples{display:none}
}
.access-controls{display:none}
.atlas-mode .instruments{display:none}
.atlas-mode .access-controls{position:absolute;display:grid;gap:8px;left:clamp(12px,1.6vw,31px);bottom:14px;padding:10px 13px;border:1px solid #314659;border-left:2px solid #70a5b3;background:#0b1824ed;max-width:calc(100% - 28px)}
.access-selects{display:flex;align-items:center;flex-wrap:wrap;gap:14px}.access-selects label{display:flex;align-items:center;gap:5px;color:#aabec9;font-size:11px}
.access-selects select{font:inherit;padding:3px 5px;max-width:125px}.access-selects #access-region{width:98px}
#access-legend{display:flex;gap:13px;flex-wrap:wrap}#access-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#dbe7ed}
#access-legend i{width:13px;height:2px;background:var(--flow-color);border-right:3px solid #fff9}
.access-controls p{margin:0;color:#9cb2bd;font-size:10px}
#access-addresses>div{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;justify-content:space-between;padding:4px 0}
#access-addresses code{font-size:10px;color:#d3e3e9}#access-addresses span{font-size:10px}
@media(max-width:680px){.atlas-mode .access-controls{left:8px;right:8px;max-width:none;bottom:5px;padding:7px 8px;gap:5px}.access-selects{gap:4px 12px}.access-selects select{max-width:93px}.atlas-mode .navtools{bottom:100px}#access-legend{gap:8px}.atlas-mode .scene-summary{font-size:10px;max-width:80vw}.atlas-mode .stage-meta{max-width:35vw}}
@media(max-height:610px){.atlas-mode .access-controls{padding:5px 8px;gap:3px}.atlas-mode .access-controls p{display:none}}
.access-selects #access-protocol{max-width:138px}.access-selects #packet-open{margin:0;padding:4px 7px;font-size:11px}
#packet-dialog{width:min(760px,96vw);max-height:85dvh;padding:14px 18px}
.packet-grid{display:grid;grid-template-columns:minmax(138px,.65fr) minmax(0,1.6fr);gap:16px}
.packet-grid h3{font-size:12px;color:#9bbcc9;font-weight:550;margin:9px 0 5px}.packet-toolbar,.packet-name{display:flex;justify-content:space-between;align-items:center;gap:10px}
.packet-toolbar strong{font-size:11px;color:#a1bdc9}.packet-name{flex-wrap:wrap;margin:8px 0}.packet-name strong{color:#d9eff3;font-weight:600}.packet-name span{font-size:11px;color:#96b0bf}
#packet-list .packet-item,#access-addresses .packet-item{display:block;width:100%;text-align:left;background:#0e1e2b;border-left:2px solid var(--packet-hue);padding:5px 7px;margin:3px 0}
.packet-item b,.packet-item small{display:block;font-size:11px;font-weight:500}.packet-item small{color:#a1b5c2;font-size:10px;overflow-wrap:anywhere}
#packet-detail dl{margin:0;font-size:11px}#packet-detail dl>div{display:grid;grid-template-columns:minmax(86px,.8fr) minmax(0,1.4fr);gap:5px;border-bottom:1px solid #2a3e4d;padding:3px 0}
#packet-detail dt{color:#a3b6c2}#packet-detail dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
@media(max-width:680px){.atlas-mode .access-controls{gap:4px}.access-selects{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px}.access-selects label{font-size:10px}.access-selects select{padding:2px 3px}#access-legend{gap:3px 8px}#access-legend span{font-size:9px}
 .atlas-mode .navtools{bottom:125px}.atlas-mode .atlas-samples{bottom:165px}.access-controls p{font-size:9px}
 .packet-grid{display:block}#packet-list{display:flex;overflow-x:auto;gap:4px}#packet-list .packet-item{min-width:108px;width:auto}.packet-toolbar{margin-top:8px}}
.access-stats{display:flex;align-items:baseline;gap:3px 12px;flex-wrap:wrap}
.access-stats>span{font-size:11px;color:#b1cbd2}.access-stats strong{font-size:14px;color:#e5f9f5;font-variant-numeric:tabular-nums}
@media(max-width:680px){.access-stats{gap:1px 8px}.access-stats strong{font-size:12px}.access-stats>span{font-size:10px}.atlas-mode .navtools{bottom:140px}.atlas-mode .atlas-samples{bottom:180px}}
.atlas-credit{display:none}.atlas-mode .atlas-credit{display:block;position:absolute;right:15px;top:66px;z-index:2;font-size:9px}.atlas-credit a{color:#d0dfde;text-shadow:0 1px 3px #07131c}.atlas-mode:has(#scene[data-city]) .scene-caption{background:linear-gradient(100deg,#071521d1,#07152100);padding:4px 20px 7px 7px}.city-map-dialog img{display:block;max-width:100%;max-height:65vh;object-fit:contain}.city-map-dialog a{color:#b6d5de}@media(max-width:680px){.atlas-mode .atlas-credit{font-size:8px;top:52px;right:8px}}
#city-close,#city-plan{display:none}.atlas-mode:has(#scene[data-city][data-render-mode=webgl]) :is(#city-close,#city-plan){display:inline-flex}
