:root{--bg:#0b1220;--panel:#111b2b;--panel2:#142033;--line:#26364d;--text:#f3f6fb;--muted:#91a0b5;--acid:#42c77a;--cyan:#53a8ff;--warn:#f2ad4f;--bad:#ef6573}
html{font-family:Inter,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body{background:linear-gradient(180deg,#0b1220 0,#0d1524 42%,#0b1220 100%);color:var(--text)}
body:before{display:none}
.shell{width:min(1240px,calc(100% - 48px))}
.masthead{height:72px;border-bottom:1px solid var(--line)}
.identity{gap:12px}
.identity .mark{width:36px;height:36px;border:0;border-radius:6px;background:#2479d8;color:#fff;font:700 17px/1 Inter,"Segoe UI",sans-serif;transform:none;box-shadow:0 5px 18px #2479d833}
.identity strong{font-size:14px;letter-spacing:.07em}
.identity small{margin-top:2px;font-size:10px;letter-spacing:.03em}
.live{gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#101a29;font-size:10px}
.live i{width:7px;height:7px;box-shadow:none}
.live span{font-weight:700;letter-spacing:.07em}
.live time{border-color:var(--line);font-variant-numeric:tabular-nums}
.hero{min-height:270px;grid-template-columns:1.3fr .7fr;align-items:center;padding:52px 0 44px}
.eyebrow{color:#6eb7ff;font-size:10px;font-weight:700;letter-spacing:.16em;margin-bottom:12px}
.hero h1{font:650 clamp(42px,5.6vw,68px)/1.02 Inter,"Segoe UI",sans-serif;letter-spacing:-.045em}
.hero h1 em{color:#8cc6ff;font-style:normal;font-weight:400}
.lede{max-width:590px;margin-top:20px;color:#a6b2c4;font-size:15px;line-height:1.55}
.hero-stat{margin:0;padding:24px;border:1px solid var(--line);border-radius:8px;background:#101a29;box-shadow:0 16px 38px #050a1266}
.hero-stat span,.metrics span,.resource span{font-size:9px;letter-spacing:.13em}
.hero-stat strong{margin:11px 0;font-size:18px}
.metrics{border-color:var(--line);border-radius:8px;background:#101a29;box-shadow:0 12px 32px #050a1247;overflow:hidden}
.metrics article{padding:22px 24px;border-color:var(--line)}
.metrics strong{margin:11px 0 6px;font:650 28px/1.1 Inter,"Segoe UI",sans-serif;letter-spacing:-.025em}
.metrics small,.hero-stat small{color:#8998ad}
.overview-fabric{margin-top:16px}
.section-head{margin:58px 0 20px}
.section-head h2,.panel h2{font:650 28px/1.1 Inter,"Segoe UI",sans-serif;letter-spacing:-.025em}
.section-head>p{font-size:11px}
.upstreams{gap:16px}
.upstream,.panel{border-color:var(--line);border-radius:8px;background:#111b2b;box-shadow:0 14px 36px #050a123d}
.upstream{padding:24px;min-height:310px}
.upstream:before{height:3px;background:#607087}
.upstream.up:before{background:var(--acid)}
.upstream.degraded:before{background:var(--warn)}
.upstream h3{margin:26px 0 7px;font:650 24px/1.1 Inter,"Segoe UI",sans-serif;letter-spacing:-.02em}
.upstream .asn{color:#70b6ff;font-size:11px}
.status{border-radius:5px;background:#0e1725;font-weight:700}
.up .status{border-color:#2e754d;color:#62d894}
.upstream-grid{margin-top:30px;gap:18px}
.upstream-grid strong{font-size:13px;font-variant-numeric:tabular-nums}
.panel{padding:28px}
.pill{border-color:#327550;border-radius:5px;background:#10251b;color:#61d792;font-weight:700}
.topology .fabric{border-color:#27384f;border-radius:6px;background:#0c1523}
.rf-route-node{border-color:#38506e;border-radius:6px;background:#142033;box-shadow:0 10px 26px #050a1266}
.rf-route-node.origin{border-color:#328b58;background:linear-gradient(145deg,#153d2a,#12271e)}
.rf-route-node strong{font-family:Inter,"Segoe UI",sans-serif;font-weight:650;letter-spacing:-.015em}
.rf-route-node small{color:#74baff}
.rf-route-node span{color:#a8b5c7}
.react-flow__controls{border-color:#334863;border-radius:6px}
.react-flow__controls-button{background:#142033!important;fill:#c1cad7!important;border-color:#334863!important}
.react-flow__controls-button:hover{background:#1b2a41!important}
.diagnostics{margin-top:16px}
.diagnostics-copy h2{margin-bottom:10px}
.tool-picker{border-radius:6px;overflow:hidden}
.tool-picker span,.target-row input,.target-row select,.target-row button{border-color:#31445f;background:#0e1725}
.tool-picker input:checked+span,.target-row button{background:#2479d8;color:#fff}
.target-row button{border-radius:5px;font-weight:700}
.terminal{border-color:#2a3d57;border-radius:6px;background:#09111d}
.terminal-head{border-color:#2a3d57;background:#0e1827}
.mobile-nav{border-color:#31455f;border-radius:10px;background:#111c2ded}
footer{border-top:1px solid #1e2d42;margin-top:28px;padding-top:26px}
@media(max-width:800px){
  .shell{width:min(100% - 24px,1240px)}
  .masthead{height:66px}
  .hero{padding:38px 0 32px;gap:24px}
  .hero h1{font-size:clamp(40px,12vw,58px)}
  .hero-stat{padding:20px}
  .metrics article{padding:20px}
  .panel{padding:20px}
  .upstream{min-height:305px}
}
@media(max-width:480px){
  .hero h1{font-size:40px}
  .lede{font-size:14px}
  .section-head h2,.panel h2{font-size:25px}
  .live{padding:6px 8px}
}