@layer base {
  /* 62.5% root: every rem below reads as px / 10. */
  html { font-size: 62.5%; }
  @media (min-width: 880px) { html { font-size: 65%; } }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1.5rem; line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
  a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .2em; }
  a:hover { text-decoration-color: var(--ink); }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  ::selection { background: rgb(var(--focus-rgb) / .18); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  }
}