:root {
  color-scheme: light dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #f5f7fa;
  color: #17212b;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 3rem 1.25rem; }
header { margin-bottom: 2.5rem; }
h1 { margin: .35rem 0; font-size: clamp(2rem, 7vw, 3.25rem); letter-spacing: -.04em; }
h2 { font-size: 1.15rem; }
.eyebrow { color: #536579; font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
#updated, footer { color: #536579; }
section { margin: 2rem 0; }
.services, .incidents { list-style: none; margin: 0; padding: 0; }
.services li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: .9rem 1rem; border-bottom: 1px solid #d9e0e8; background: #fff; }
.services li:first-child { border-radius: .75rem .75rem 0 0; }
.services li:last-child { border-radius: 0 0 .75rem .75rem; }
.service-name { font-weight: 650; }
.services small { grid-column: 1 / -1; color: #64748b; }
.health { border-radius: 999px; padding: .2rem .65rem; font-size: .82rem; text-transform: capitalize; }
.health-ok { color: #166534; background: #dcfce7; }
.health-degraded { color: #854d0e; background: #fef3c7; }
.health-down { color: #991b1b; background: #fee2e2; }
.health-unknown { color: #475569; background: #e2e8f0; }
.incidents li { padding: .9rem 1rem; border-left: 3px solid #dc2626; background: #fff; }
@media (max-width: 480px) {
  main { padding: 2rem 1rem; }
  header { margin-bottom: 1.75rem; }
  .services li { grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .65rem; padding: .8rem; }
  .incidents li { overflow-wrap: anywhere; }
}
@media (prefers-color-scheme: dark) {
  :root { background: #101820; color: #e5edf5; }
  .services li, .incidents li { background: #1b2834; border-color: #344454; }
  .eyebrow, #updated, footer, .services small { color: #a8bacb; }
  .health-ok { color: #bbf7d0; background: #14532d; }
  .health-degraded { color: #fde68a; background: #713f12; }
  .health-down { color: #fecaca; background: #7f1d1d; }
  .health-unknown { color: #cbd5e1; background: #334155; }
}