:root {
  --bg: #f7f7f5; --panel: #ffffff; --text: #1f2328; --muted: #5d6470; --line: #e3e5e8;
  --up: #1a7f37; --down: #cf222e; --warn: #9a6700; --unknown: #6e7781;
  --bar-empty: #e9ebee; --node: #ffffff; --node-line: #9aa3ad; --mon: #eef4ff; --vpn: #f3f0ff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216; --panel: #161b22; --text: #e6edf3; --muted: #9aa4b0; --line: #2b323b;
    --up: #3fb950; --down: #f85149; --warn: #d29922; --unknown: #8b949e;
    --bar-empty: #232a33; --node: #161b22; --node-line: #4b5563; --mon: #16213a; --vpn: #1f1a36;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 32px; }
h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 32px 0 10px; }
.sub, .muted { color: var(--muted); }
.sub { margin: 0; }
a { color: inherit; }
.banner { display: flex; gap: 12px; align-items: center; margin-top: 20px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--unknown); border-radius: 10px; }
.banner strong { display: block; font-size: 17px; }
.banner .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--unknown); flex: none; }
.banner.operational { border-left-color: var(--up); } .banner.operational .dot { background: var(--up); }
.banner.degraded, .banner.partial_data { border-left-color: var(--warn); }
.banner.degraded .dot, .banner.partial_data .dot { background: var(--warn); }
.banner.major_outage { border-left-color: var(--down); } .banner.major_outage .dot { background: var(--down); }
.legend { display: flex; justify-content: space-between; font-size: 12px; padding: 0 14px 6px; }
.services { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.services li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 11px 14px; border-top: 1px solid var(--line); }
.services li:first-child { border-top: 0; }
.name { font-weight: 600; overflow-wrap: anywhere; }
.state { font-size: 13px; }
.state::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--unknown); }
.state.up::before { background: var(--up); } .state.down::before { background: var(--down); }
.state.down { color: var(--down); font-weight: 600; }
.bars { display: flex; gap: 3px; }
.bars span { width: 9px; height: 22px; border-radius: 2px; background: var(--bar-empty); }
.bars .b-good { background: var(--up); } .bars .b-mid { background: var(--warn); } .bars .b-bad { background: var(--down); }
.pct { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; min-width: 104px; }
.showcase figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
svg { width: 100%; height: auto; display: block; }
svg .node rect { fill: var(--node); stroke: var(--node-line); }
svg .node.mon rect { fill: var(--mon); } svg .node.vpn rect { fill: var(--vpn); }
svg text { fill: var(--text); font-size: 13px; text-anchor: middle; }
svg text.small { fill: var(--muted); font-size: 11px; } svg text.left { text-anchor: start; }
svg .edge { stroke: var(--node-line); stroke-width: 1.6; fill: none; }
svg .edge.dashed { stroke-dasharray: 5 4; }
svg .arrowhead { fill: var(--node-line); }
.facts { padding-left: 18px; } .facts li { margin: 8px 0; }
footer { padding: 24px 16px 40px; font-size: 13px; }
@media (max-width: 560px) {
  .services li { grid-template-columns: 1fr auto; }
  .bars { grid-column: 1 / -1; order: 3; }
  .legend span:first-child { display: none; }
}