*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; font-family: var(--font-sans); font-size: 100%; line-height: var(--line-height); text-size-adjust: 100%; }
body { margin: 0; color: var(--color-text); background: var(--color-background); font-size: var(--font-size-base); }
main { display: block; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
p, li { max-width: var(--text-width); }
a { color: var(--color-accent); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.15em; }
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { color: inherit; font: inherit; }
button, [type="button"], [type="submit"] { cursor: pointer; }
:focus-visible { outline: 0.2rem solid var(--color-accent); outline-offset: 0.2rem; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media print {
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  a[href]::after { content: " (" attr(href) ")"; }
  nav, form { display: none !important; }
}