/* Generated by build.py from the page templates - do not edit.
 *
 * The rules every page shares: colour variables, the reset, typography,
 * links, topbar, theme toggle, skip link. Each page keeps only what is
 * genuinely its own inline, because :root differs between them (the
 * homepage is 34rem wide with a numbered sidebar column, the rest 38rem)
 * and a single global set of variables would clobber one or the other.
 *
 * One request, cached across every page, instead of ~170 duplicated
 * lines arriving again with each one.
 */

:root[data-theme="dark"] { --bg: #0a0a0a; --fg: #eeeeee; --muted: #9a9a9a; --accent: #4fae82; --rule: #262626; }
:root[data-theme="light"] { --bg: #fafafa; --fg: #111111; --muted: #5c5c5c; --accent: #2f6f4f; --rule: #dddddd; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background-color: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 120ms ease, text-decoration-color 120ms ease; }
a:hover, a:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--bg); }
.topbar { padding: 2.75rem 0 0; margin-bottom: 1.5rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.site-nav { display: flex; gap: 1rem; font-size: 0.85rem; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent); }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
.theme-toggle { background: none; border: none; font-family: var(--font); font-size: 0.85rem; color: var(--muted); cursor: pointer; padding: 0; }
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--accent); }
.theme-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg); color: var(--fg); padding: 0.5rem 1rem; border: 1px solid var(--rule); font-size: 0.85rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

@media print {
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}