:root {
  --bg: #0b1020;
  --surface: #121a30;
  --text: #e8ecf5;
  --muted: #aeb8d0;
  --accent: #6fd3ff;
  --amber: #f0b24a;
  --line: #2a3556;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.6 system-ui, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: break-word;
}
header, main, footer { max-width: 46rem; margin: 0 auto; padding: 0 16px; }
header { padding-top: 3rem; padding-bottom: 1rem; }
footer { padding-top: 2rem; padding-bottom: 3rem; border-top: 1px solid var(--line); margin-top: 3rem; }
h1 { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.2; margin: 0 0 1rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2.5rem 0 1rem; color: var(--accent); }
.lede { font-size: 1.15rem; margin: 0 0 1rem; }
.status { color: var(--muted); margin: 0; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.75rem; }
a { color: var(--accent); }
a:hover { color: var(--text); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.skip {
  position: absolute; left: 16px; top: -4rem;
  background: var(--accent); color: var(--bg);
  padding: 0.5rem 1rem; font-weight: 600; z-index: 1;
}
.skip:focus { top: 8px; }
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.card p { margin: 0 0 1rem; }
.badge {
  display: inline-block;
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: 999px; padding: 0.1rem 0.75rem;
  font-size: 0.875rem; font-weight: 600;
}
.attribution { color: var(--muted); }
.chips { list-style: none; padding: 0; margin: 0 0 1rem; }
.chips li { margin-bottom: 0.5rem; }
.chip {
  display: inline-block;
  font-family: var(--mono); font-size: 0.875rem;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 4px; padding: 0.1rem 0.5rem;
}
.state { color: var(--amber); font-size: 0.875rem; }
.source, .note { color: var(--muted); font-size: 0.9375rem; }
.card .note { margin-bottom: 0; }
.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.links li { margin: 0; }
footer p:last-child { color: var(--muted); font-size: 0.9375rem; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }