:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17333d;
  background: #f6f5f0;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
.masthead { padding: 1.5rem max(1.5rem, calc((100vw - 64rem) / 2)); border-bottom: 1px solid #d8dfdc; background: #fff; }
.brand { color: #17333d; font-size: 1.2rem; font-weight: 750; text-decoration: none; }
.brand span { display: block; margin-top: .3rem; color: #586d73; font-size: .75rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; }
main { max-width: 64rem; margin: 0 auto; padding: 4.5rem 1.5rem; }
.eyebrow { margin: 0; color: #576d70; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1 { max-width: 46rem; margin: 1.1rem 0; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 650; line-height: 1.12; letter-spacing: -.045em; }
.intro { margin: 0 0 2.5rem; color: #53696e; font-size: 1.1rem; line-height: 1.6; }
.heading-row, .status-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.badge { padding: .45rem .8rem; border: 1px solid #bdcfc7; border-radius: 2rem; background: #eaf1e9; color: #315844; font-size: .8rem; font-weight: 650; white-space: nowrap; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.metric { padding: 2rem; border: 1px solid #d6dfd9; border-radius: .8rem; background: #fff; }
.metric h2 { margin: 0; color: #53696e; font-size: .95rem; font-weight: 550; }
.figure { margin: 1.3rem 0 .75rem; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 650; line-height: 1.1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.metric-note { margin: 0; color: #64777b; font-size: .85rem; }
.status-row { margin-top: 1.6rem; }
#data-status { font-size: .95rem; }
#data-status[data-state="error"], .error-message { color: #a33326; font-weight: 650; }
#data-status[data-state="success"] { color: #315844; }
.button { display: inline-flex; align-items: center; gap: 1.2rem; padding: .9rem 1.15rem; border: 1px solid #173f48; border-radius: .4rem; background: #173f48; color: #fff; font: inherit; font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.button:hover { background: #225866; }
.button:disabled { opacity: .55; cursor: wait; }
a:focus-visible, button:focus-visible { outline: 3px solid #bd651c; outline-offset: 4px; }
.footnote { margin: 3rem 0 0; padding-top: 1.25rem; border-top: 1px solid #d8dfdc; color: #607478; font-size: .85rem; line-height: 1.6; }
@media (max-width: 36rem) {
  main { padding-top: 2.7rem; }
  .metrics { grid-template-columns: 1fr; }
  .metric { padding: 1.5rem; }
  .status-row { align-items: flex-start; flex-direction: column; gap: .5rem; }
}