* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
h1 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; margin: var(--s6) 0 var(--s3); }
h3 { font-size: 14px; line-height: 1.35; }
p { margin: var(--s2) 0; max-width: 72ch; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

code, pre { font-family: var(--mono); font-size: 12.5px; }
code { white-space: nowrap; background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
pre {
  margin: var(--s3) 0; padding: var(--s3) var(--s4); overflow-x: auto;
  background: var(--surface-2); border-radius: var(--r); line-height: 1.6;
}
pre code { background: none; padding: 0; white-space: inherit; }

:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; box-shadow: 0 0 0 1px var(--accent); }

.muted { color: var(--ink-2); }
.small { font-size: 12.5px; }
.ok { color: var(--ok); font-weight: 600; }
.error { color: var(--bad); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }