:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #071018;
  color: #e6edf3;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #13263a, #071018 46%); }
.shell { width: min(760px, calc(100% - 2rem)); margin: 0 auto; padding: 5rem 0 3rem; }
.eyebrow { color: #75d4ff; font-size: .78rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: .25rem 0; font-size: clamp(2.5rem, 8vw, 4.75rem); letter-spacing: -.055em; }
.lede { max-width: 40rem; color: #9eb0c0; font-size: 1.08rem; line-height: 1.65; }
.panel { margin-top: 2.75rem; overflow: hidden; border: 1px solid #294158; border-radius: 18px; background: rgba(9, 23, 35, .88); box-shadow: 0 24px 70px rgba(0, 0, 0, .28); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid #294158; }
h2 { margin: 0; font-size: 1rem; letter-spacing: .02em; }
.version { color: #9eb0c0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.summary { margin: 0; padding: 1rem 1.5rem; border-bottom: 1px solid #1c3245; color: #9eb0c0; font-size: .92rem; line-height: 1.6; }
.summary strong { color: #e6edf3; font-weight: 720; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 1rem 1.5rem; text-align: left; border-bottom: 1px solid #1c3245; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 620; text-transform: capitalize; }
.badge { display: inline-flex; min-width: 7.5rem; justify-content: center; padding: .32rem .68rem; border: 1px solid; border-radius: 999px; font-size: .75rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.badge-up { color: #70e4ab; border-color: #246447; background: #0b3022; }
.badge-down { color: #ff9a9a; border-color: #743b3b; background: #361919; }
/* Neutral, not red. `unconfigured` is a configuration state; only `down` is a fault. */
.badge-unconfigured { color: #b9c5d0; border-color: #405367; background: #172635; }
.meaning { color: #9eb0c0; font-size: .86rem; line-height: 1.55; }
.meaning code { color: #cdd9e4; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .82rem; }
.legend { padding: 1.1rem 1.5rem 1.35rem; border-top: 1px solid #1c3245; }
.legend p { margin: 0; }
.legend p:first-of-type { display: flex; flex-wrap: wrap; gap: .5rem; }
.legend .badge { min-width: 0; }
.legend-note { margin-top: .85rem !important; max-width: 46rem; color: #8194a5; font-size: .84rem; line-height: 1.65; }
.legend-note code { color: #b9c5d0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
footer { display: flex; gap: .75rem; align-items: baseline; margin-top: 1.1rem; color: #8194a5; font-size: .8rem; }
code { overflow-wrap: anywhere; color: #b8c9d8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) { .shell { padding-top: 2.5rem; } th, td { padding: .9rem 1rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }