*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg-0); color: var(--text-0);
  font: var(--fs-base)/var(--lh-normal) var(--font);
  -webkit-font-smoothing: antialiased; overflow: hidden;
}
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 700; }
p { margin: 0 0 var(--sp-3); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); }
::selection { background: var(--accent-glow); }
mark { background: var(--accent-glow); color: var(--accent); border-radius: 2px; padding: 0 1px; }
kbd { font: var(--fs-xs)/1 var(--mono); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 2px 5px; color: var(--text-1); background: var(--bg-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
[hidden] { display: none !important; }
* { transition-duration: 0s; }
@media (prefers-reduced-motion: no-preference) { .anim { transition: all var(--t); } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }