*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-color: var(--color-rule) var(--color-paper); scroll-padding-top: 24px; }
body { margin: 0; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.75; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { color: var(--color-ink); background: var(--color-selection); }
a { color: var(--color-accent); text-underline-offset: .24em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
a:active { color: var(--color-muted); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 5px; }
h1, h2, h3 { margin: 0; font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}