:root {
  color-scheme: light;
  --ink: #17223b;
  --muted: #5f6d82;
  --line: #dfe7f0;
  --blue: #075ac8;
  --cyan: #10aee5;
  --soft: #f5f9fd;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  background: #fff;
  color: var(--ink);
  font: 16px/1.7 Inter, Aptos, "Segoe UI", sans-serif;
}
header, main, footer { width: min(780px, calc(100% - 2rem)); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: calc(1.4rem + env(safe-area-inset-top)) 0 1.4rem; border-bottom: 1px solid var(--line); }
header a { font-size: 0.9rem; font-weight: 700; }
header .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); font-size: 1.15rem; letter-spacing: -0.025em; text-decoration: none; }
header .brand img { width: 40px; height: 40px; display: block; }
main { padding: 3rem 0 4rem; }
h1, h2 { line-height: 1.2; letter-spacing: -0.025em; }
h1 { margin: 0 0 0.6rem; font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { margin-top: 2.4rem; font-size: 1.35rem; }
p, li { color: var(--muted); }
p, li, td, th, h1, h2, a, code { overflow-wrap: anywhere; }
strong { color: var(--ink); }
a { color: var(--blue); }
/* The app states its own focus ring (src/styles.css: 3px solid, 2px offset) and
   these pages were relying on whatever the browser happened to draw. Links are
   the only interactive element here, so the indicator is stated rather than
   inherited — the UA default is visible in Chrome but varies by browser. */
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 2px; }
.eyebrow { margin: 0; color: var(--blue); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.summary { margin: 1.5rem 0 2rem; padding: 1.1rem 1.25rem; border-left: 4px solid var(--cyan); border-radius: 0 12px 12px 0; background: var(--soft); }
.meta { color: var(--muted); font-size: 0.82rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: 0.75rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--soft); }
footer { padding: 1.5rem 0 calc(2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: 0.8rem; }
@media (max-width: 600px) {
  header, main, footer { width: min(calc(100% - 2rem), 780px); }
  main { padding-top: 2rem; }
  table { display: block; overflow-x: auto; overscroll-behavior-inline: contain; }
}