*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ac-bg); color: var(--ac-text); font: 16px/1.6 var(--ac-font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ac-brand-text); text-underline-offset: 3px; }
a:hover { color: var(--ac-brand-hover); }
:focus-visible { outline: 2px solid var(--ac-brand-hover); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 650; }
h3 { font-size: 1.1rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; }
.wrap { max-width: var(--ac-max); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--ac-surface); padding: 8px 12px; z-index: 10; }
.muted { color: var(--ac-text-secondary); }
.small { font-size: .9rem; }
[hidden] { display: none !important; }