*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-text); }
a { color: var(--color-link); }
button, input { font: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
[hidden], .hidden { display: none !important; }
.text-1, .text-2, .text-3, .text-4 { font-family: var(--font-mono); font-weight: 400; }
.text-1 { font-size: var(--text-body); color: var(--color-text); }
.text-2 { font-size: var(--text-title); color: var(--color-text); }
.text-3 { font-size: var(--text-small); color: var(--color-muted); }
.text-4 { font-size: var(--text-title); color: var(--color-muted); }
.text-green { color: var(--color-success); }
.text-red { color: var(--color-error); }
.link { color: var(--color-link-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 30; inset: .5rem auto auto .5rem; transform: translateY(-200%); background: var(--color-header); padding: .5rem; }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}