/* Trilho · base: reset leve, tipografia, foco, utilitários. */
*, *::before, *::after { box-sizing: border-box; }
html { font: var(--fs-md)/var(--lh-body) var(--font); color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%;
  font-feature-settings: "cv11", "ss01"; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); }
p { margin: 0; }
p, li { max-width: 72ch; }
a { color: var(--link); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
/* Título e <main> recebem foco só por programa (gaveta abriu, pulo para o conteúdo): leitor de tela anuncia, sem anel na tela. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; box-shadow: none; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .92em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-4) 0; }
::selection { background: var(--link-soft); }

.title { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.02em; line-height: var(--lh-tight); }
.subtitle { color: var(--muted); font-size: var(--fs-md); }
.section-title { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.muted { color: var(--muted); }
.code-ref { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.hint { font-size: var(--fs-sm); color: var(--muted); }
.stack { display: grid; gap: var(--s-4); }
.stack-sm { display: grid; gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.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; }
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 500; background: var(--ink); color: var(--on-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-md); }
.skip-link:focus { top: var(--s-2); }
[hidden] { display: none !important; }
[aria-busy="true"] { opacity: .6; transition: opacity var(--t-fast); }