:root {
    --brand: #2ed36a;
    --mint: #21eec9;
    --ink: #4d4c5a;
    --quiet: #f8f9fa;
    --outline: #dbe8ff;
    font-size: max(66px, 5.208333333vw);
    color-scheme: light;
    scrollbar-gutter: stable;
}
* { box-sizing: border-box; }
body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
body { font: 12px serif; color: var(--ink); background: white; }
#page-content { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #157e43; outline-offset: 5px; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
em { color: var(--brand); font-style: normal; }
mark { color: inherit; background: var(--mint); border-radius: .3rem; }
.skip-link { position: fixed; z-index: 500; top: 4px; left: 8px; transform: translateY(-150%); background: white; font: 16px sans-serif; padding: 12px; }
.skip-link:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 768px) { :root { font-size: 13.333333333vw; } }