:root{color-scheme:dark;--bg:#090f18;--panel:#111b28;--border:#253246;--text:#e7edf7;--muted:#8393a9;--teal:#45d6c2;--amber:#f5bd65;--purple:#a998ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}.shell{display:flex;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;width:246px;flex-shrink:0;border-right:1px solid var(--border);background:#0c1420;padding:31px 19px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:850;letter-spacing:1.2px;line-height:1}.brand-icon{color:var(--teal);font-size:31px}.brand-muted{color:var(--teal)}.brand-sub{display:block;color:var(--muted);font-size:9px;letter-spacing:3.6px;margin-top:8px}.nav-caption,.tiny-label{font-size:10px;letter-spacing:2px;color:#6c7f99;font-weight:800}.nav-caption{margin:70px 12px 17px}.nav{display:grid;gap:7px}.nav-link{padding:14px 16px;display:flex;gap:15px;align-items:center;color:#91a2b7;border:1px solid transparent;border-radius:8px;font-weight:600}.nav-link.active,.nav-link:hover{color:var(--teal);background:#142b33;border-color:#24494b}.side-bottom{margin-top:auto;border-top:1px solid var(--border);padding:24px 11px 0}.side-system{margin-top:14px;display:flex;align-items:center;gap:9px;font-weight:650}.side-note{color:var(--muted);font-size:11px;margin:9px 0 25px}.repo-link{color:var(--teal);font-size:12px}.main{min-width:0;flex:1}.topbar{height:78px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;padding:0 44px}.breadcrumb,.top-right{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1.4px}.breadcrumb span{padding:0 12px;color:#536479}.top-right{display:flex;align-items:center;gap:25px}.avatar{background:#263a4a;color:var(--teal);width:33px;height:33px;border-radius:8px;display:grid;place-items:center;letter-spacing:0}.content{max-width:1510px;margin:auto;padding:44px}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.eyebrow,.section-kicker{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--teal)}.eyebrow-sep{color:#586c7c;margin:0 9px}h1{font-size:clamp(34px,4vw,52px);letter-spacing:-2px;margin:13px 0 5px;line-height:1.1}.heading-period{color:var(--teal)}.subtitle{color:var(--muted);margin:11px 0 0}.heading-actions{display:flex;align-items:center;gap:12px}.mode-pill,.btn,.small-tag{border:1px solid var(--border);border-radius:7px;padding:11px 13px;font-size:11px;font-weight:750;letter-spacing:.5px}.mode-pill{color:var(--amber);background:#332b1e}.btn{background:#1a2b39;color:var(--text);cursor:pointer}.btn:hover{background:#264151}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8993a2;vertical-align:middle}.dot.teal{background:var(--teal);box-shadow:0 0 11px #45d6c266}.dot.amber{background:var(--amber)}.mode-pill .dot{margin-right:6px}.notice{margin:30px 0;display:flex;gap:13px;align-items:center;padding:14px 17px;border:1px solid #5d4b30;background:#211d18;border-radius:8px;color:#e4c79b;font-size:12px;line-height:1.5}.notice-icon{font-size:20px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:11px}.metric{padding:21px}.metric-top{display:flex;justify-content:space-between;color:#99a9bd;font-size:11px;letter-spacing:1.2px;font-weight:800}.metric-top span{font-size:19px;color:#6d8396}.metric-value{font-size:36px;letter-spacing:-1.5px;font-weight:750;margin:18px 0 13px}.metric-value small{font-size:13px;color:var(--muted);letter-spacing:0;font-weight:550;margin-left:4px}.track{height:5px;background:#253347;border-radius:6px;overflow:hidden}.fill{height:100%;width:0;background:var(--teal);border-radius:6px;transition:width .5s}.fill.purple{background:var(--purple)}.fill.amber-fill{background:var(--amber)}.metric-foot{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:15px}.metric-foot span{color:#61778a;font-size:9px}.sparkline{height:5px;background:repeating-linear-gradient(90deg,var(--teal) 0 3px,transparent 3px 7px);opacity:.65}.section{margin-top:42px;scroll-margin-top:20px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:17px}.section-kicker{margin-bottom:9px}h2{font-size:20px;letter-spacing:-.5px;margin:0}.muted,.section-meta{color:var(--muted)}.section-meta{font-size:10px;font-weight:700;letter-spacing:1px}.section-meta .dot{margin-right:8px}.node-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.node{padding:18px;min-height:178px}.node-top{display:flex;align-items:center;justify-content:space-between}.node-symbol{width:36px;height:36px;display:grid;place-items:center;background:#1b343c;color:var(--teal);border-radius:8px;font-size:20px}.node-id{font-family:ui-monospace,monospace;font-size:11px;color:#7d91a5}.node-name{font-size:17px;font-weight:750;margin:22px 0 4px}.node-desc{font-size:11px;color:var(--muted)}.node-status{display:flex;align-items:center;gap:7px;margin-top:20px;font-size:10px;color:#b6c6d6}.node-status .dot{background:var(--teal)}.node-status.offline .dot{background:#697487}.node-status.offline{color:#8795a6}.lower-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:18px}.traffic,.events{min-width:0;overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 18px}.small-tag{color:#8ea4b8;padding:7px 10px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;white-space:nowrap}th{color:#778aa0;background:#142131;text-align:left;font-size:10px;letter-spacing:1px;padding:14px 18px}td{padding:14px 18px;border-bottom:1px solid #223043;color:#b9c9d8}td:last-child{color:var(--teal)}.rx{color:var(--teal)}.tx{color:var(--purple)}.panel-footer{padding:15px 22px;color:#71859b;font-size:10px}.event-list{padding:0 22px;min-height:270px}.event{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #223043}.event-bullet{margin-top:5px;width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--teal)}.event-bullet.warning{background:var(--amber)}.event-bullet.info{background:#7daeff}.event-title{font-size:12px;font-weight:650}.event-time{color:var(--muted);font-size:10px;margin-top:5px}footer{border-top:1px solid var(--border);display:flex;gap:20px;justify-content:space-between;color:#6e8298;font-size:10px;letter-spacing:1.4px;font-weight:700;margin-top:45px;padding-top:22px}@media(max-width:1200px){.metrics{grid-template-columns:repeat(2,1fr)}.node-grid{grid-template-columns:repeat(3,1fr)}.lower-grid{grid-template-columns:1fr}}@media(max-width:760px){.shell{display:block}.sidebar{position:relative;height:auto;width:100%;padding:15px 18px;display:block}.brand{font-size:15px}.brand-icon{font-size:25px}.nav-caption,.side-bottom{display:none}.nav{display:flex;overflow-x:auto;margin-top:16px;gap:5px}.nav-link{padding:9px 12px;white-space:nowrap;font-size:12px}.topbar{height:52px;padding:0 19px}.content{padding:26px 18px}.heading{align-items:start;flex-direction:column}.heading-actions{width:100%;justify-content:space-between}.metrics{gap:10px}.metric{padding:15px}.metric-value{font-size:29px}.metric-foot{flex-wrap:wrap;gap:5px}.node-grid{grid-template-columns:repeat(2,1fr);gap:10px}.node{min-height:160px}.section{margin-top:30px}footer{flex-wrap:wrap}.section-meta{font-size:9px}}@media(max-width:380px){.metrics,.node-grid{grid-template-columns:1fr}.nav-link span{display:none}}

/* Architecture diagram: responsive with accessible horizontal scrolling */
.topology-panel{padding:16px 20px;overflow:hidden}.topology-note{font-size:12px;color:var(--muted);line-height:1.6;padding:0 22px}.topology-scroll{overflow-x:auto;border:1px solid #2b4156;border-radius:10px;background:radial-gradient(ellipse at center,#12303b88,transparent 65%),repeating-linear-gradient(0deg,transparent 0 29px,#ffffff06 30px),repeating-linear-gradient(90deg,transparent 0 29px,#ffffff06 30px)}#topology-svg{display:block;width:100%;min-width:900px;height:auto}.topology-legend{display:flex;flex-wrap:wrap;gap:18px;padding:16px 22px 5px;color:#9eb0c4;font-size:11px}.arch-link{fill:none;stroke:#4ad8c6;stroke-width:2;stroke-opacity:.58}.arch-link.planned{stroke:#8394b1;stroke-dasharray:6 7;stroke-opacity:.45}.arch-particle{fill:#5af5d7;filter:drop-shadow(0 0 4px #4ad8c6)}.arch-particle.planned{fill:#8997b0;opacity:.55;filter:none}.arch-box{fill:#142334;stroke:#3c566c;stroke-width:1.5}.arch-node.running .arch-box{fill:#16363a;stroke:#4ad8c6}.arch-node.prototype .arch-box{stroke:#e2b768}.arch-state{fill:#94a9be;font-size:10px;letter-spacing:1px;font-weight:700}.arch-title{fill:#f0f5fc;font-size:15px;font-weight:750}.arch-detail{fill:#9db1c4;font-size:11px}.arch-node.running .arch-indicator{fill:#4ad8c6}.arch-node.prototype .arch-indicator{fill:#e2b768}.arch-indicator{fill:#8491a5}.arch-heading{fill:#7c91a8;font-size:12px;letter-spacing:2px;font-weight:800}@media(max-width:760px){.topology-panel{padding:10px}.topology-note{padding:0 12px}#topology-svg{min-width:950px}}

.topology-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.topology-controls button{background:#1b2d3c;color:#dcecf4;border:1px solid #3a5367;border-radius:7px;padding:8px 12px;cursor:pointer}.topology-controls button:hover{background:#274457}.topology-controls span{font-size:11px;color:#a8bfd0}.arch-node{cursor:grab;touch-action:none;outline:none}.arch-node:active{cursor:grabbing}.arch-node.selected .arch-box,.arch-node:focus-visible .arch-box{stroke:#69f4d8;stroke-width:3}.arch-node text{pointer-events:none}

.arch-particle{stroke:#062524;stroke-width:1;fill:#9bffe9}.arch-particle.planned{fill:#d0dafa;opacity:.9}.event-list p{overflow-wrap:anywhere;padding:8px 0}.event-list a{color:#9bffe9}