/* Reset, type roles, links, focus, the page head (theme.md section 3). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/atkinson-hyperlegible-next-latin-c30cdd7a.woff2") format("woff2");
}
/* Metric-matched stand-in while the woff2 loads: Liberation Sans or Arial scaled to
   Atkinson's average width and vertical metrics (computed with fontTools, 2026-09-05). */
@font-face {
  font-family: "Atkinson Hyperlegible fallback";
  src: local("Liberation Sans"), local("Arial");
  size-adjust: 90.36%;
  ascent-override: 108.89%;
  descent-override: 34.97%;
  line-gap-override: 0%;
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--font); font-size: 17px; line-height: 1.5;
    font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }
  a:focus-visible, button:focus-visible, td:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
  h1, h2, h3 { line-height: 1.15; text-wrap: balance; margin: 0; }
  p { margin: 0; }
  table { border-collapse: collapse; }
  b { font-weight: 700; }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }

  .head { display: grid; gap: 14px; padding: 34px 0 22px; }
  .code { font-size: .95rem; color: var(--muted); }
  .code b { color: var(--ink); font-weight: 800; font-size: 1.15rem; margin-right: .35em; }
  h1 { font-size: clamp(1.7rem, 4.6vw, 2.5rem); font-weight: 800; letter-spacing: -.015em; max-width: 22ch; }
  .answer { max-width: 62ch; font-size: 1.05rem; }

  /* The one control style: the theme switch, future filters. There is no primary button.
     The pressed button is read from the root's data-theme as well as aria-pressed, so the
     header is right at first paint, before the theme controller connects. */
  .theme { display: flex; gap: 4px; }
  .theme button { font: inherit; font-size: .8rem; padding: 2px 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--muted); border-radius: 3px; cursor: pointer; }
  .theme button[aria-pressed="true"],
  :root:not([data-theme]) .theme button[value=""],
  :root[data-theme="light"] .theme button[value="light"],
  :root[data-theme="dark"] .theme button[value="dark"] { color: var(--ink); border-color: var(--ink); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}