:root {
  color-scheme: light dark;
  --bg: #faf7f2;
  --fg: #2a2622;
  --muted: #6b6259;
  --accent: #a8562f;
  --border: #e4ddd0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a17;
    --fg: #e8e2d8;
    --muted: #a89d8d;
    --accent: #e2955f;
    --border: #3a352e;
  }
}
body { background: var(--bg); color: var(--fg); }
h1, h2, h3 { color: var(--fg); }
a { color: var(--accent); }
blockquote { color: var(--muted); border-left-color: var(--border); }
figcaption { color: var(--muted); }
pre { background: rgba(128, 110, 90, 0.08); }
hr { border-top-color: var(--border); }

* { box-sizing: border-box; }
/* Accessibility scaffolding (ADR 0010). The skip link is the first
   focusable element on every page: invisible until focused, then it
   appears at the top so a keyboard or voice user can jump straight past
   anything preceding the content. Focus is always visibly outlined —
   never removed — since a voice or keyboard user has no pointer to tell
   them where they are. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  z-index: 10;
  /* Every bundled theme defines these, and the structural block is
     concatenated after the palette, so they always resolve. Without an
     opaque background the focused link would sit unreadably over the
     content it is meant to skip. */
  background: var(--bg);
  color: var(--fg);
}
.skip-link:focus {
  left: 0;
  outline: 2px solid currentColor;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
main { display: block; }
body {
  margin: 0 auto;
  max-width: 38rem;
  padding: 3rem 1.5rem 6rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
}
h1, h2, h3 { line-height: 1.25; }
h1 { font-size: 1.8rem; margin-top: 2.5rem; }
h2 { font-size: 1.4rem; margin-top: 2rem; }
h3 { font-size: 1.15rem; margin-top: 1.5rem; }
p { margin: 1rem 0; }
a { text-decoration: none; border-bottom: 1px solid transparent; }
a:hover, a:focus { border-bottom-color: currentColor; }
ul { padding-left: 1.4rem; }
li { margin: 0.4rem 0; }
blockquote { margin: 1.5rem 0; padding: 0.2rem 1rem; border-left: 3px solid; }
figure { margin: 1.5rem 0; }
figcaption { font-size: 0.85rem; margin-bottom: 0.4rem; }
pre { padding: 1rem; overflow-x: auto; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; }
hr { border: none; border-top: 1px solid; margin: 2.5rem 0; }