:root { color-scheme: light dark; --ok: #16a34a; --warn: #d97706; --down: #dc2626; }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center;
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: Canvas; color: CanvasText;
}
main { text-align: center; padding: 24px; }
h1 { margin: 12px 0 0; font-size: 1.6rem; font-weight: 600; }
.name { margin: 0 0 24px; opacity: .6; }
.dot { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto; background: #9ca3af; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 25%, transparent); }
.dot.warn { background: var(--warn); }
.dot.down { background: var(--down); }
dl { display: grid; grid-template-columns: auto auto; gap: 4px 20px; justify-content: center; margin: 0; text-align: left; }
dt { opacity: .6; }
dd { margin: 0; font-variant-numeric: tabular-nums; }
.hint { margin-top: 24px; font-size: .8rem; opacity: .5; }