@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-canvas);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  h1 { font-size: var(--text-2xl); line-height: 1.27; font-weight: 700; letter-spacing: -0.02em; }
  h2 { font-size: var(--text-lg); line-height: 1.4; font-weight: 700; }
  a { color: var(--color-action); text-underline-offset: 3px; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  img, svg { display: block; max-width: 100%; }
  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .icon--sm { width: 16px; height: 16px; }
  .mono { font-family: var(--font-mono); font-size: 0.92em; }

  @media (width <= 720px) { body { font-size: 1rem; } }

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