*, *::before, *::after { box-sizing: border-box; }
html { min-width: 20rem; color-scheme: light; }
body { margin: 0; min-height: 100vh; background: var(--vanilla); color: var(--eucalyptus); font-family: var(--font-sans); line-height: 1.6; }
img { display: block; max-width: 100%; }
h1, h2, p { margin-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:where(a, button, summary):focus-visible { outline: none; box-shadow: 0 3px 0 -1px var(--eucalyptus); }
.button--primary:focus-visible { box-shadow: 0 3px 0 -1px var(--buttercup); }
:where(input, select, textarea):focus-visible { outline: none; border-color: var(--eucalyptus); box-shadow: inset 0 -2px 0 var(--eucalyptus); }