:root {
  --bg: #0d1117;
  --fg: #c9d1d9;
  --accent: #7ee787;
  --muted: #8b949e;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", monospace;
}

main { flex: 1; padding: 2rem 1rem; max-width: 60rem; margin: 0 auto; width: 100%; }
.banner { color: var(--accent); overflow-x: auto; }
.muted { color: var(--muted); }
.cursor { animation: blink 1s steps(1) infinite; }
footer { padding: 1rem; text-align: center; color: var(--muted); font-size: 0.875rem; }
a { color: var(--accent); }
.status { color: var(--muted); }
.status[data-state="online"] { color: var(--accent); }
.status[data-state="offline"] { color: #f0883e; }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }