:root {
  color-scheme: dark light;
  --bg: #17191e;
  --fg: #d5d9e0;
  --muted: #8f98a5;
  --ok: #57c27a;
  --bad: #e06c6c;
  font: 16px/1.5 system-ui, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f6f7f9; --fg: #20242b; --muted: #5d6673; }
}
body { margin: 0; background: var(--bg); color: var(--fg); }
main { padding: 24px 16px; max-width: 560px; margin: 0 auto; }
h1 { font-size: 22px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.state { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.state[data-state='connected'] .dot { background: var(--ok); }
.state[data-state='closed'] .dot { background: var(--bad); }