/* Palette. Each subject has a surface (`--x`, carries --on-tone text), a text-safe deep
   (`--x-deep`, ≥4.5:1 on paper, soft and card) and a soft tint. Dark values follow below. */
:root {
  color-scheme: light;
  --paper: #faf9f5;
  --ink: #141413;
  --muted: #5f5e55;
  --line: #d8d6cc;
  --soft: #ebe9df;
  --card: #f3f1ea;
  --on-tone: #141413;
  --shadow: #141413;
  --signal: #ff4f1a;
  --accent: #7ea4dc;
  --accent-deep: #2443b5;
  --accent-soft: #e1e9f7;
  --rose: #ef94ad;
  --rose-deep: #b3154f;
  --rose-soft: #f9e2e9;
  --sage: #8dbb6f;
  --sage-deep: #2b6a24;
  --sage-soft: #e2efd8;
  --lilac: #b69cf0;
  --lilac-deep: #6431c0;
  --lilac-soft: #ece4fb;
  --ochre: #f0b452;
  --ochre-deep: #b0420c;
  --ochre-soft: #f9e8cb;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --stripe: linear-gradient(90deg, var(--accent) 0 20%, var(--rose) 20% 40%, var(--sage) 40% 60%, var(--lilac) 60% 80%, var(--ochre) 80%);
  --tone: var(--accent);
  --tone-deep: var(--accent-deep);
  --tone-soft: var(--accent-soft);
  font: 16px/1.65 var(--sans);
  color: var(--ink);
  background: var(--paper);
}
/* Dark: the same block twice, once for the system setting and once for the header toggle. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #161513; --ink: #f2f0e8; --muted: #aaa79b; --line: #3a3933; --soft: #26251f; --card: #1d1c19;
  --shadow: #000; --signal: #ff6a3d;
  --accent: #789fd9; --accent-deep: #98b4ff; --accent-soft: #1b2337;
  --rose: #e98ba6; --rose-deep: #ff8db0; --rose-soft: #331d25;
  --sage: #87b469; --sage-deep: #9ad27a; --sage-soft: #1c2a17;
  --lilac: #ad93ea; --lilac-deep: #c3a6ff; --lilac-soft: #271f39;
  --ochre: #e9ab4a; --ochre-deep: #ffaa66; --ochre-soft: #33240f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #161513; --ink: #f2f0e8; --muted: #aaa79b; --line: #3a3933; --soft: #26251f; --card: #1d1c19;
    --shadow: #000; --signal: #ff6a3d;
    --accent: #789fd9; --accent-deep: #98b4ff; --accent-soft: #1b2337;
    --rose: #e98ba6; --rose-deep: #ff8db0; --rose-soft: #331d25;
    --sage: #87b469; --sage-deep: #9ad27a; --sage-soft: #1c2a17;
    --lilac: #ad93ea; --lilac-deep: #c3a6ff; --lilac-soft: #271f39;
    --ochre: #e9ab4a; --ochre-deep: #ffaa66; --ochre-soft: #33240f;
  }
}
/* Subject tone: set on <html> for course pages, and on any element that needs its own. */
[data-tone="accent"] { --tone: var(--accent); --tone-deep: var(--accent-deep); --tone-soft: var(--accent-soft); }
[data-tone="rose"] { --tone: var(--rose); --tone-deep: var(--rose-deep); --tone-soft: var(--rose-soft); }
[data-tone="sage"] { --tone: var(--sage); --tone-deep: var(--sage-deep); --tone-soft: var(--sage-soft); }
[data-tone="lilac"] { --tone: var(--lilac); --tone-deep: var(--lilac-deep); --tone-soft: var(--lilac-soft); }
[data-tone="ochre"] { --tone: var(--ochre); --tone-deep: var(--ochre-deep); --tone-soft: var(--ochre-soft); }

* { box-sizing: border-box; }
html { scroll-padding-top: 7rem; }
body { margin: 0; }
::selection { color: var(--on-tone); background: var(--tone); }
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .12em; }
button, input { font: inherit; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.055em; text-wrap: balance; }
h1 em, h2 em { font-weight: 400; }
h3 { font-size: 1.25rem; line-height: 1.3; letter-spacing: -.025em; font-weight: 600; }
main:focus { outline: none; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
.on-tone :focus-visible { outline-color: var(--on-tone); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: -8rem; left: 1rem; padding: .6rem 1rem; color: var(--paper); background: var(--ink); z-index: 100; }
.skip-link:focus { top: 1rem; }

/* Header and footer, each edged with the five-subject stripe. */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); }
.site-header::after, .site-footer::before { content: ""; display: block; height: 4px; background: var(--stripe); }
.header-inner { max-width: 1380px; min-height: 86px; margin: auto; padding: 0 3rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.brand-mark { background: var(--accent); color: var(--on-tone); padding: .45rem .6rem .55rem; font: 700 1.5rem/1.2 var(--mono); letter-spacing: -.1em; box-shadow: 0 0 0 var(--ink); transition: background-color 140ms, box-shadow 140ms, transform 140ms; }
.brand:hover .brand-mark { background: var(--signal); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
.brand-name { font-size: .95rem; font-weight: 650; line-height: 1.4; }
.brand-name > span { display: block; color: var(--muted); font-size: .72rem; font-weight: 400; }
.site-header nav { display: flex; align-items: center; gap: 2rem; font-size: .875rem; }
.site-header nav a { padding: .6rem 0; text-decoration: none; }
.site-header nav a[aria-current] { box-shadow: 0 3px var(--signal); }
.site-header nav a:hover { color: var(--tone-deep); }
.theme-toggle { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--ink); }
.theme-icon { width: .95rem; height: .95rem; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle[aria-pressed="true"] .theme-icon { background: linear-gradient(270deg, currentColor 50%, transparent 50%); }
.site-main { max-width: 1380px; margin: auto; padding: 0 3rem; min-height: 72vh; }
.site-footer { max-width: 1284px; width: calc(100% - 6rem); margin: auto; padding: 0 0 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-size: .68rem; }
.site-footer::before { flex-basis: 100%; margin-bottom: .5rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

.eyebrow { font: 500 .67rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .11em; }

/* Buttons: a hard offset shadow that presses in. */
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .9rem 1.1rem; border: 1px solid var(--ink); text-decoration: none; font-size: .83rem; box-shadow: 4px 4px 0 var(--tone); transition: transform 120ms, box-shadow 120ms; }
.button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tone); }
.button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tone); }
.button-dark { background: var(--ink); color: var(--paper); }
.on-tone .button { box-shadow: 4px 4px 0 var(--on-tone); }
.on-tone .button:hover { box-shadow: 6px 6px 0 var(--on-tone); }
.on-tone .button:active { box-shadow: 0 0 0 var(--on-tone); }
.on-tone .button-dark { background: var(--on-tone); color: var(--tone); border-color: var(--on-tone); }

/* Home */
.is-home .site-main, .is-home .header-inner { max-width: 68rem; }
.is-home .site-footer { max-width: 62rem; margin-inline: auto; }
.home-page { padding-block: 3.5rem 4rem; font: 1rem/1.65 var(--sans); }
.home-page > section + section { margin-top: 3.5rem; }
.home-page h1, .home-page h2 { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: -.045em; }
.home-page h1 { margin-bottom: 1.25rem; font-size: clamp(2.75rem, 5vw, 4rem); }
.home-page h2 { margin-bottom: 1.5rem; font-size: 2.25rem; }
.home-intro-copy { max-width: 40rem; font-size: 1.05rem; }
.home-page a { text-decoration-thickness: 1px; }
.home-note-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.home-note-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1.25rem; align-items: baseline; padding: 1rem .75rem; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color 140ms, color 140ms; }
.home-note-row:is(:hover, :focus-visible) { background: var(--tone); color: var(--on-tone); border-bottom-color: var(--on-tone); }
.home-note-row:focus-visible { outline-color: var(--on-tone); outline-offset: -3px; }
.home-note-row:is(:hover, :focus-visible) .home-meta { color: var(--on-tone); }
.home-meta { font-size: .875rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-library-link { margin-top: .75rem; }
.home-library-link a:is(:hover, :focus-visible) { background: var(--accent); color: var(--on-tone); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.section-heading h2 { font-size: 2.8rem; margin-top: .75rem; }
.section-heading > p { font-size: .85rem; color: var(--muted); }

/* Subject rows: each fills with its own subject colour on hover. */
.subject-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.subject-row { display: grid; grid-template-columns: 3.2rem 1fr auto 1.5rem; gap: 1.5rem; align-items: center; padding: 1.8rem .75rem; text-decoration: none; border-bottom: 1px solid var(--line); transition: background-color 140ms, color 140ms; }
.subject-row:hover, .subject-row:focus-visible { background: var(--tone); color: var(--on-tone); border-bottom-color: var(--on-tone); }
.subject-row:focus-visible { outline-offset: -3px; outline-color: var(--on-tone); }
.subject-row:hover :is(p, .subject-status), .subject-row:focus-visible :is(p, .subject-status) { color: var(--on-tone); }
.subject-row:hover .subject-number, .subject-row:focus-visible .subject-number { background: var(--on-tone); color: var(--tone); }
.subject-row:hover .subject-arrow { transform: translate(3px, -3px); }
.subject-arrow { font-size: 1.6rem; transition: transform 140ms; }
.subject-number { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; font: .8rem var(--mono); border-radius: 50%; color: var(--on-tone); }
.tone-accent { background: var(--accent); }
.tone-rose { background: var(--rose); }
.tone-sage { background: var(--sage); }
.tone-lilac { background: var(--lilac); }
.tone-ochre { background: var(--ochre); }
.subject-copy p { margin-top: .35rem; max-width: 46rem; color: var(--muted); font-size: .85rem; }
.subject-status { color: var(--muted); font: .6rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }

/* Library */
.library-hero { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; padding: 3rem; margin: 2.5rem 0 3.5rem; background: var(--accent); color: var(--on-tone); box-shadow: 10px 10px 0 var(--shadow); }
.library-hero h1 { font-size: clamp(3.2rem, 5.7vw, 5.3rem); margin: 1.2rem 0 1.5rem; }
.library-intro { max-width: 39rem; font-size: .95rem; }
.library-intro p + p { margin-top: .6rem; }
.library-stamp { width: 13rem; height: 15rem; display: flex; flex-direction: column; justify-content: space-between; background: #faf9f5; color: #141413; padding: 1.5rem; transform: rotate(3deg); box-shadow: 6px 6px 0 #141413; }
.library-stamp > span:first-child { font: 500 1.55rem/1.15 var(--mono); letter-spacing: -.06em; }
.library-stamp > span:last-child { font-size: 2rem; line-height: 1; align-self: end; }
.library-index { padding-bottom: 4rem; }
.library-index .section-heading h2 { font: 500 .75rem var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.start-panel { margin: 0 0 4rem; padding: 3rem; background: var(--tone); color: var(--on-tone); display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; box-shadow: 10px 10px 0 var(--shadow); }
.start-panel .eyebrow { grid-column: 1/-1; margin-bottom: 1rem; }
.start-panel h2 { font-size: 3rem; grid-row: span 2; }
.start-panel > p:not(.eyebrow) { font-size: .95rem; max-width: 28rem; }
.start-panel .button { justify-self: start; margin-top: 1.5rem; }

/* Reader layout */
.reader-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 170px; gap: 3rem; padding-top: 2.5rem; padding-bottom: 4rem; }
.subject-sidebar, .page-contents { position: sticky; top: 125px; align-self: start; font-size: .75rem; }
.sidebar-all { display: inline-block; margin: 1rem 0; text-decoration: none; color: var(--muted); }
.sidebar-all:hover { color: var(--ink); }
.subject-sidebar nav { display: grid; gap: .2rem; }
.subject-sidebar nav a { display: flex; align-items: center; gap: .6rem; padding: .65rem .5rem; margin-left: -.5rem; line-height: 1.4; text-decoration: none; }
.subject-sidebar nav a[aria-current] { background: var(--soft); font-weight: 600; }
.subject-dot { width: .55rem; height: .55rem; flex-shrink: 0; border-radius: 50%; }
.course-content { min-width: 0; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .65rem; color: var(--muted); font-size: .68rem; margin-bottom: 1.75rem; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.course-header { border-bottom: 1px solid var(--ink); padding-bottom: 2rem; margin-bottom: 2.5rem; }
.course-header h1 { font-size: clamp(2.8rem, 4.7vw, 4.3rem); margin: 1rem 0 1.25rem; }
.course-description { font-size: 1rem; color: var(--muted); }
.course-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.course-meta span { font: .6rem var(--mono); padding: .4rem .6rem; background: var(--soft); }

.prose { font-size: 1rem; line-height: 1.8; }
.prose h2 { font-size: 2rem; letter-spacing: -.04em; margin: 3rem 0 1rem; scroll-margin-top: 1rem; }
.prose h3 { margin: 2rem 0 1rem; }
.prose p, .prose ul, .prose ol { margin-bottom: 1.2rem; }
.prose ol, .prose ul { padding-left: 1.3rem; }
.prose li { padding-left: .2rem; margin-bottom: .8rem; }
.prose li::marker { color: var(--tone-deep); }
.prose a { text-decoration-color: var(--tone-deep); text-decoration-thickness: .09em; }
.prose a:hover { color: var(--tone-deep); text-decoration-thickness: .14em; }
.prose strong { font-weight: 650; }

/* Contents panel and reading position */
.page-contents nav > ul { list-style: none; margin: 1rem 0 0; padding: 0; }
.page-contents li { margin: 0; padding: 0; }
.page-contents a { display: block; text-decoration: none; line-height: 1.5; padding: .45rem 0 .45rem .8rem; border-left: 1px solid var(--line); color: var(--muted); }
.page-contents a:hover { color: var(--ink); }
.page-contents a[aria-current] { margin-left: -1px; border-left: 3px solid var(--tone-deep); color: var(--ink); font-weight: 600; background: linear-gradient(90deg, var(--tone-soft), transparent); }
.reading-label { display: flex; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font: .6rem var(--mono); color: var(--muted); }
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 50; pointer-events: none; }
.reading-progress span { display: block; height: 100%; background: var(--tone-deep); transform: scaleX(0); transform-origin: left; }
.mobile-contents { display: none; margin-bottom: 2rem; border: 1px solid var(--ink); }
.mobile-contents summary { display: flex; justify-content: space-between; padding: .8rem 1rem; cursor: pointer; font-size: .8rem; }
.mobile-contents[open] summary { border-bottom: 1px solid var(--line); background: var(--tone-soft); }
.mobile-contents ul { list-style: none; padding: .5rem 1rem; margin: 0; }
.mobile-contents a { display: block; padding: .4rem 0; text-decoration: none; font-size: .8rem; }
.mobile-contents a[aria-current] { color: var(--tone-deep); font-weight: 600; }
.back-link { display: inline-block; margin-top: 2rem; font-size: .8rem; }
.is-interior:not(.is-course) .course-content { grid-column: 2/-1; max-width: 44rem; }

/* Not found */
.not-found { max-width: 44rem; padding: 4rem 0 5rem; }
.not-found-code { display: inline-block; margin-bottom: 2rem; padding: .5rem 1.25rem .9rem; background: var(--signal); color: #141413; font: 400 clamp(5rem, 14vw, 9rem)/.9 var(--serif); letter-spacing: -.06em; box-shadow: 10px 10px 0 var(--shadow); }
.not-found h1 { font-size: clamp(2.6rem, 5vw, 3.8rem); margin-bottom: 1rem; }
.not-found p:not(.not-found-code) { color: var(--muted); margin-bottom: 2rem; }

@media (max-width: 1150px) {
  .reader-layout { grid-template-columns: 165px minmax(0, 1fr); gap: 2rem; }
  .page-contents { display: none; }
  .mobile-contents { display: block; }
  .site-footer { margin-inline: 3rem; }
}
@media (max-width: 760px) {
  .header-inner { padding-inline: 1.5rem; min-height: 72px; }
  .brand-name { font-size: .8rem; }
  .brand-name > span { font-size: .6rem; }
  .site-header nav { gap: 1.25rem; font-size: .78rem; }
  .github-link { display: none; }
  .site-main { padding-inline: 1.5rem; }
  .home-page { padding-block: 2.5rem 3rem; }
  .home-page > section + section { margin-top: 2.5rem; }
  .home-page h2 { font-size: 2rem; }
  .home-note-row { column-gap: .75rem; padding-inline: .5rem; }
  .section-heading { gap: 1rem; }
  .section-heading h2 { font-size: 2.4rem; }
  .section-heading > p { font-size: .75rem; }
  .subject-row { grid-template-columns: 2.7rem 1fr 1rem; gap: .9rem; padding: 1.4rem .5rem; }
  .subject-copy h3 { font-size: 1.1rem; }
  .subject-copy p { font-size: .78rem; }
  .subject-status { display: none; }
  .library-hero { padding: 2.5rem 1.5rem; margin: 0 -1.5rem 2.5rem; grid-template-columns: 1fr; gap: 1rem; box-shadow: none; }
  .library-hero h1 { font-size: clamp(2.9rem, 9vw, 4rem); }
  .library-stamp { display: none; }
  .library-index { padding-bottom: 2rem; }
  .start-panel { grid-template-columns: 1fr; padding: 1.5rem; margin-bottom: 2.5rem; box-shadow: 6px 6px 0 var(--shadow); }
  .start-panel h2 { font-size: 2.5rem; margin-bottom: 1.25rem; grid-row: auto; }
  .reader-layout { display: block; padding-top: 1.5rem; }
  .subject-sidebar { position: static; margin-bottom: 2rem; }
  .subject-sidebar > .eyebrow { display: none; }
  .sidebar-all { margin-top: 0; }
  .subject-sidebar nav { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem .25rem .75rem; }
  .subject-sidebar nav a { margin: 0; padding: .45rem .65rem; flex-shrink: 0; border: 1px solid var(--line); font-size: .65rem; }
  .course-header h1 { font-size: 3.2rem; }
  .course-description { font-size: .95rem; }
  .breadcrumbs { margin-bottom: 1.25rem; }
  .prose { font-size: .95rem; }
  .prose h2 { font-size: 1.8rem; }
  .site-footer { width: calc(100% - 3rem); margin-inline: 1.5rem; }
}
@media (max-width: 380px) {
  .brand-name { display: none; }
  .site-header nav { gap: 1rem; }
  .course-header h1 { font-size: 2.8rem; }
  .section-heading { align-items: start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .button:hover, .brand:hover .brand-mark, .subject-row:hover .subject-arrow { transform: none; }
}
/* Chroma token colours (GitHub-like), driven by variables so the dark theme only swaps values. */
:root {
  --syn-text: var(--ink); --syn-keyword: #cf222e; --syn-constant: #0550ae; --syn-function: #6639ba; --syn-variable: #953800;
  --syn-string: #0a3069; --syn-comment: #57606a; --syn-deleted: #82071e; --syn-deleted-bg: #ffebe9; --syn-inserted: #116329; --syn-inserted-bg: #dafbe1;
}
:root[data-theme="dark"] {
  --syn-keyword: #ff7b72; --syn-constant: #79c0ff; --syn-function: #d2a8ff; --syn-variable: #ffa657;
  --syn-string: #a5d6ff; --syn-comment: #9198a1; --syn-deleted: #ffdcd7; --syn-deleted-bg: #67060c; --syn-inserted: #aff5b4; --syn-inserted-bg: #033a16;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --syn-keyword: #ff7b72; --syn-constant: #79c0ff; --syn-function: #d2a8ff; --syn-variable: #ffa657;
    --syn-string: #a5d6ff; --syn-comment: #9198a1; --syn-deleted: #ffdcd7; --syn-deleted-bg: #67060c; --syn-inserted: #aff5b4; --syn-inserted-bg: #033a16;
  }
}

/* PreWrapper */ .chroma {-webkit-text-size-adjust:none; }
/* Error */ .chroma .err { color:#f6f8fa;background-color:#82071e }
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
/* LineHighlight */ .chroma .hl { background-color:var(--soft) }
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
/* Line */ .chroma .line { display:flex; }
/* Keyword */ .chroma .k { color:var(--syn-keyword) }
/* KeywordConstant */ .chroma .kc { color:var(--syn-keyword) }
/* KeywordDeclaration */ .chroma .kd { color:var(--syn-keyword) }
/* KeywordNamespace */ .chroma .kn { color:var(--syn-keyword) }
/* KeywordPseudo */ .chroma .kp { color:var(--syn-keyword) }
/* KeywordReserved */ .chroma .kr { color:var(--syn-keyword) }
/* KeywordType */ .chroma .kt { color:var(--syn-keyword) }
/* NameAttribute */ .chroma .na { color:var(--syn-text) }
/* NameClass */ .chroma .nc { color:var(--syn-text) }
/* NameConstant */ .chroma .no { color:var(--syn-constant) }
/* NameDecorator */ .chroma .nd { color:var(--syn-constant) }
/* NameEntity */ .chroma .ni { color:var(--syn-function) }
/* NameLabel */ .chroma .nl { color:var(--syn-keyword);font-weight:bold }
/* NameNamespace */ .chroma .nn { color:var(--syn-text) }
/* NameOther */ .chroma .nx { color:var(--syn-text) }
/* NameTag */ .chroma .nt { color:var(--syn-constant) }
/* NameBuiltin */ .chroma .nb { color:var(--syn-function) }
/* NameBuiltinPseudo */ .chroma .bp { color:var(--syn-comment) }
/* NameVariable */ .chroma .nv { color:var(--syn-variable) }
/* NameVariableClass */ .chroma .vc { color:var(--syn-variable) }
/* NameVariableGlobal */ .chroma .vg { color:var(--syn-variable) }
/* NameVariableInstance */ .chroma .vi { color:var(--syn-variable) }
/* NameVariableMagic */ .chroma .vm { color:var(--syn-variable) }
/* NameFunction */ .chroma .nf { color:var(--syn-function) }
/* NameFunctionMagic */ .chroma .fm { color:var(--syn-function) }
/* LiteralString */ .chroma .s { color:var(--syn-string) }
/* LiteralStringAffix */ .chroma .sa { color:var(--syn-string) }
/* LiteralStringBacktick */ .chroma .sb { color:var(--syn-string) }
/* LiteralStringChar */ .chroma .sc { color:var(--syn-string) }
/* LiteralStringDelimiter */ .chroma .dl { color:var(--syn-string) }
/* LiteralStringDoc */ .chroma .sd { color:var(--syn-string) }
/* LiteralStringDouble */ .chroma .s2 { color:var(--syn-string) }
/* LiteralStringEscape */ .chroma .se { color:var(--syn-string) }
/* LiteralStringHeredoc */ .chroma .sh { color:var(--syn-string) }
/* LiteralStringInterpol */ .chroma .si { color:var(--syn-string) }
/* LiteralStringOther */ .chroma .sx { color:var(--syn-string) }
/* LiteralStringRegex */ .chroma .sr { color:var(--syn-string) }
/* LiteralStringSingle */ .chroma .s1 { color:var(--syn-string) }
/* LiteralStringSymbol */ .chroma .ss { color:var(--syn-string) }
/* LiteralNumber */ .chroma .m { color:var(--syn-constant) }
/* LiteralNumberBin */ .chroma .mb { color:var(--syn-constant) }
/* LiteralNumberFloat */ .chroma .mf { color:var(--syn-constant) }
/* LiteralNumberHex */ .chroma .mh { color:var(--syn-constant) }
/* LiteralNumberInteger */ .chroma .mi { color:var(--syn-constant) }
/* LiteralNumberIntegerLong */ .chroma .il { color:var(--syn-constant) }
/* LiteralNumberOct */ .chroma .mo { color:var(--syn-constant) }
/* Operator */ .chroma .o { color:var(--syn-constant) }
/* OperatorWord */ .chroma .ow { color:var(--syn-constant) }
/* OperatorReserved */ .chroma .or { color:var(--syn-constant) }
/* Punctuation */ .chroma .p { color:var(--syn-text) }
/* Comment */ .chroma .c { color:var(--syn-comment) }
/* CommentHashbang */ .chroma .ch { color:var(--syn-comment) }
/* CommentMultiline */ .chroma .cm { color:var(--syn-comment) }
/* CommentSingle */ .chroma .c1 { color:var(--syn-comment) }
/* CommentSpecial */ .chroma .cs { color:var(--syn-comment) }
/* CommentPreproc */ .chroma .cp { color:var(--syn-comment) }
/* CommentPreprocFile */ .chroma .cpf { color:var(--syn-comment) }
/* GenericDeleted */ .chroma .gd { color:var(--syn-deleted);background-color:var(--syn-deleted-bg) }
/* GenericEmph */ .chroma .ge { color:var(--syn-text) }
/* GenericInserted */ .chroma .gi { color:var(--syn-inserted);background-color:var(--syn-inserted-bg) }
/* GenericOutput */ .chroma .go { color:var(--syn-text) }
/* GenericUnderline */ .chroma .gl { text-decoration:underline }
/* TextWhitespace */ .chroma .w { color:inherit }
/* Course navigation, lesson pages, and Markdown components. */
.is-course .reader-layout { grid-template-columns: 236px minmax(0, 44rem) 170px; justify-content: space-between; }

/* Course tree */
.course-sidebar { position: sticky; top: 115px; align-self: start; max-height: calc(100vh - 135px); overflow-y: auto; font-size: .75rem; padding-right: .5rem; }
.course-tree-title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font: 1.15rem/1.2 var(--serif); letter-spacing: -.03em; text-decoration: none; }
.course-tree-title[aria-current] { text-decoration: underline; text-decoration-color: var(--tone-deep); }
.course-tree, .course-tree ol { list-style: none; margin: 0; padding: 0; }
.course-tree > li { border-top: 1px solid var(--line); }
.course-tree summary { display: flex; gap: .55rem; padding: .6rem 0; cursor: pointer; font-weight: 600; line-height: 1.35; list-style: none; }
.course-tree summary::-webkit-details-marker { display: none; }
.course-tree summary::after { content: "+"; margin-left: auto; color: var(--muted); font-family: var(--mono); }
.course-tree details[open] > summary::after { content: "−"; }
.course-tree ol { padding-bottom: .6rem; }
.course-tree ol a { display: flex; gap: .55rem; padding: .32rem .4rem; margin-left: -.4rem; line-height: 1.4; color: var(--muted); text-decoration: none; border-left: 3px solid transparent; }
.course-tree ol a:hover { color: var(--ink); background: var(--soft); }
.course-tree a[aria-current] { color: var(--ink); background: var(--tone-soft); border-left-color: var(--tone-deep); font-weight: 600; }
.course-tree a[aria-current] .tree-number { color: var(--tone-deep); }
.tree-number { flex: 0 0 2rem; font: .66rem/1.9 var(--mono); color: var(--muted); }
.tree-reference { margin-top: .5rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.tree-reference a { text-decoration: none; color: var(--muted); }
.tree-reference a[aria-current] { color: var(--ink); font-weight: 600; }

/* Reading marks (added by progress.js): a check that never claims more than "read". */
.read-mark { margin-left: auto; padding-left: .4rem; color: var(--tone-deep); font: 700 .7rem/1.9 var(--mono); }
.lesson-index .read-mark { grid-column: 3; grid-row: 1; padding-left: 0; line-height: inherit; }
.lesson-index a[data-read] .lesson-minutes { visibility: hidden; }

/* Tone blocks: course, module and lesson headers set in the subject colour. */
.tone-block { position: relative; margin: 0 8px 3rem 0; padding: 1.75rem 2.25rem 2rem; border: 1px solid var(--shadow); background: var(--tone); color: var(--on-tone); box-shadow: 8px 8px 0 var(--shadow); }
.tone-block .block-top { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; }
.tone-block .block-top .eyebrow { padding-top: .6rem; text-align: right; }
.block-number { font: 400 clamp(4.75rem, 10vw, 8.5rem)/.82 var(--serif); letter-spacing: -.07em; margin-left: -.04em; }
.tone-block h1 { margin: 1.25rem 0 1rem; }
.tone-block .course-description, .tone-block .lesson-summary { color: var(--on-tone); }
.tone-block .course-meta span { background: transparent; border: 1px solid var(--on-tone); }
.course-start { margin-top: 1.75rem; }

/* Course progress (shown by progress.js) */
.course-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem 1rem; margin-top: 1.5rem; font: .68rem var(--mono); }
.course-progress[hidden] { display: none; }
.progress-track { height: 8px; border: 1px solid var(--on-tone); }
.progress-track > span { display: block; height: 100%; width: 0; background: var(--on-tone); }
.progress-reset { padding: .25rem .55rem; border: 1px solid var(--on-tone); background: transparent; color: var(--on-tone); font: .62rem var(--mono); cursor: pointer; }
.progress-reset:hover { background: var(--on-tone); color: var(--tone); }
.progress-reset[hidden] { display: none; }

/* Course and module index */
.index-title { font-size: 2rem; letter-spacing: -.04em; margin: 3.5rem 0 1.25rem; }
.module-card { border-top: 1px solid var(--ink); padding: 1.5rem 0 1rem; }
.module-card header { display: grid; grid-template-columns: 2.65rem 1fr; gap: 1.1rem; align-items: start; margin-bottom: 1rem; }
.module-card h3 a { text-decoration: none; }
.module-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--tone-deep); }
.module-card header p { margin-top: .3rem; color: var(--muted); font-size: .85rem; }
.module-number { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: 50%; color: var(--on-tone); font: .8rem var(--mono); }
.lesson-index { list-style: none; margin: 0; padding: 0; }
.lesson-index a { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: baseline; padding: .65rem .5rem; border-bottom: 1px solid var(--line); text-decoration: none; font-size: .92rem; }
.lesson-index a > * { grid-row: 1; }
.lesson-index a:hover { background: var(--tone-soft); }
.lesson-index a:hover .lesson-title { text-decoration: underline; text-decoration-color: var(--tone-deep); }
.lesson-number, .lesson-minutes { font: .68rem var(--mono); color: var(--muted); }
.lesson-index a:hover .lesson-number { color: var(--tone-deep); }
.lesson-title small { display: block; margin-top: .2rem; color: var(--muted); font-size: .8rem; }
.lesson-index-detailed { border-top: 1px solid var(--ink); }
.lesson-index-detailed a { padding-block: 1rem; }

/* Lesson header */
.lesson-header h1 { font-size: clamp(2.5rem, 4.2vw, 3.7rem); }
.lesson-summary { font: italic 1.2rem/1.45 var(--serif); max-width: 40rem; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--on-tone); font-size: .8rem; }
.lesson-meta div { display: flex; gap: .5rem; align-items: baseline; }
.lesson-meta .meta-wide { flex-basis: 100%; }
.lesson-meta dt { font: 600 .6rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.lesson-meta dd { margin: 0; }
.difficulty { display: inline-flex; gap: 2px; vertical-align: middle; }
.difficulty span { width: .5rem; height: .5rem; border: 1px solid currentColor; border-radius: 50%; }
.difficulty span.on { background: currentColor; }
.lesson-read { margin-top: 1.25rem; }
.lesson-read[hidden] { display: none; }
.read-toggle { padding: .4rem .7rem; border: 1px solid var(--on-tone); background: transparent; color: var(--on-tone); font: .68rem var(--mono); cursor: pointer; box-shadow: 3px 3px 0 var(--on-tone); transition: transform 120ms, box-shadow 120ms; }
.read-toggle:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--on-tone); }
.read-toggle:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--on-tone); }
.read-toggle[data-read] { background: var(--on-tone); color: var(--tone); }

/* Prose components */
.prose { counter-reset: section fig; }
.prose h2, .prose h3 { position: relative; }
.lesson[data-lesson-page] .prose > h2 { counter-increment: section; }
.lesson[data-lesson-page] .prose > h2::before { content: counter(section, decimal-leading-zero); display: inline-block; margin-right: .7rem; padding: .3rem .4rem .25rem; vertical-align: .45em; background: var(--tone); color: var(--on-tone); font: 700 .72rem/1 var(--mono); letter-spacing: .02em; box-shadow: 2px 2px 0 var(--shadow); }
.heading-anchor { margin-left: .4em; color: var(--muted); font: 400 .7em var(--mono); text-decoration: none; opacity: 0; transition: opacity 120ms; }
.heading-anchor:hover { color: var(--tone-deep); }
.prose :is(h2, h3):hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.prose code { font: .86em var(--mono); background: var(--soft); padding: .1em .35em; border-radius: 3px; }
.prose pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
.prose hr { border: 0; height: 4px; background: var(--stripe); margin: 3rem 0; opacity: .85; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.25rem; border-left: 4px solid var(--tone); color: var(--muted); }
.prose details { margin: 0 0 1.2rem; border: 1px solid var(--line); background: var(--card); }
.prose details summary { padding: .6rem 1rem; cursor: pointer; font-size: .85rem; font-weight: 600; }
.prose details summary:hover { color: var(--tone-deep); }
.prose details[open] summary { border-bottom: 1px solid var(--line); }
.prose details > :not(summary) { margin: .8rem 1rem; }

.code-block { margin: 1.5rem 0; border: 1px solid var(--line); background: var(--card); }
.code-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem .5rem .35rem .9rem; border-bottom: 1px solid var(--line); font: .65rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.code-file { margin-right: .75rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.code-copy { padding: .25rem .6rem; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: .65rem var(--mono); cursor: pointer; }
.code-copy:hover { border-color: var(--ink); }
.code-copy[data-state="ok"] { background: var(--sage-soft); border-color: var(--sage-deep); }
.code-copy[data-state="error"] { background: var(--rose-soft); border-color: var(--rose-deep); }
.code-block pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; font: .82rem/1.6 var(--mono); background: transparent !important; tab-size: 4; }

/* Callouts: one treatment per type; the label always names the type. */
.callout { --c-deep: var(--accent-deep); --c-soft: var(--accent-soft); margin: 1.75rem 0; padding: 1rem 1.25rem 1.1rem; border-left: 4px solid var(--c-deep); background: var(--c-soft); }
.callout > :last-child { margin-bottom: 0; }
.callout-label { display: inline-block; margin-bottom: .45rem !important; color: var(--c-deep); font: 700 .65rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.callout-tip { --c-deep: var(--sage-deep); --c-soft: var(--sage-soft); }
.callout-tip .callout-label::before { content: "→ "; }
.callout-note .callout-label::before { content: "○ "; }
.callout-important { padding: 1.25rem 1.4rem 1.3rem; margin-right: 6px; border: 1px solid var(--shadow); background: var(--tone); color: var(--on-tone); box-shadow: 6px 6px 0 var(--shadow); }
.callout-important .callout-label { color: var(--on-tone); }
.callout-important .callout-label::before { content: "★ "; }
.callout-important a { text-decoration-color: currentColor; }
.callout-important a:hover { color: inherit; }
.callout-important code { background: transparent; border: 1px solid currentColor; }
.callout-warning, .callout-caution { border: 1px solid var(--c-deep); border-left-width: 6px; }
.callout-warning { --c-deep: var(--ochre-deep); --c-soft: var(--ochre-soft); }
.callout-caution { --c-deep: var(--rose-deep); --c-soft: var(--rose-soft); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--c-deep) 5%, transparent) 10px 20px), var(--c-soft); }
.callout:is(.callout-warning, .callout-caution) .callout-label { padding: .1rem .45rem; background: var(--c-deep); color: var(--paper); }
.callout-warning .callout-label::before { content: "! "; }
.callout-caution .callout-label::before { content: "× "; }

.table-wrap { margin: 1.5rem 0; overflow-x: auto; border-top: 2px solid var(--ink); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.55; }
.table-wrap th { text-align: left; font: 600 .62rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.table-wrap th, .table-wrap td { padding: .65rem .9rem .65rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap td:first-child { min-width: 9rem; }
.table-wrap tbody tr:hover { background: var(--tone-soft); }

/* Previous and next */
.lesson-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.lesson-pager a { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; border: 1px solid var(--ink); text-decoration: none; box-shadow: 4px 4px 0 var(--tone); transition: transform 120ms, box-shadow 120ms, background-color 120ms; }
.lesson-pager a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tone); background: var(--tone-soft); }
.lesson-pager a:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--tone); }
.lesson-pager a > span:last-child { font: 1.1rem/1.3 var(--serif); letter-spacing: -.02em; }
.pager-next { text-align: right; grid-column: 2; }
.pager-hint { margin-top: .9rem; text-align: right; color: var(--muted); font: .62rem/1.6 var(--mono); }
.pager-hint[hidden] { display: none; }
.pager-hint kbd { font: inherit; padding: .05rem .3rem; border: 1px solid var(--line); background: var(--soft); }

@media (max-width: 1150px) {
  .is-course .reader-layout { grid-template-columns: 210px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .course-sidebar { position: static; max-height: none; margin-bottom: 2rem; padding: 0; }
  .course-tree-title { margin-bottom: .5rem; }
  .tone-block { padding: 1.25rem 1.25rem 1.5rem; margin-right: 6px; box-shadow: 6px 6px 0 var(--shadow); }
  .block-number { font-size: 4.25rem; }
  .lesson-header h1 { font-size: 2.6rem; }
  .lesson-summary { font-size: 1.05rem; }
  .course-progress { grid-template-columns: auto 1fr; }
  .progress-reset { grid-column: 1 / -1; justify-self: start; }
  .lesson-pager { grid-template-columns: 1fr; }
  .pager-next { grid-column: 1; }
  .lesson-index a { grid-template-columns: 2.6rem 1fr auto; }
  .lesson-minutes { display: none; }
  .heading-anchor { opacity: .5; }
}
@media (hover: none) and (pointer: coarse) {
  .pager-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-pager a:hover, .read-toggle:hover { transform: none; }
}
/* Mermaid diagrams and the expanded viewer. Header mirrors .code-header. */
/* Diagrams always sit on a light card so one Mermaid palette stays legible in both themes. */
.diagram { counter-increment: fig; margin: 2.25rem 6px 2.25rem 0; border: 1px solid var(--shadow); background: #faf9f5; color: #141413; box-shadow: 6px 6px 0 var(--shadow); }
.diagram-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.4rem; padding: .35rem .5rem .35rem .9rem; border-bottom: 1px solid var(--shadow); background: var(--tone); color: var(--on-tone); font: 600 .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.diagram-header > span::before { content: "Fig. " counter(fig); margin-right: .75rem; padding: .15rem .4rem; background: var(--on-tone); color: var(--tone); font-weight: 700; }
.diagram-header :focus-visible { outline-color: var(--on-tone); }
.diagram-expand { flex-shrink: 0; padding: .25rem .6rem; border: 1px solid var(--on-tone); background: transparent; color: var(--on-tone); font: .65rem var(--mono); text-transform: none; letter-spacing: 0; cursor: pointer; }
.diagram-expand:hover { background: var(--on-tone); color: var(--tone); }
.diagram-expand[hidden] { display: none; }

/* Rendered diagram: centred, never shrunk below a legible scale; scrolls sideways instead. */
.diagram-canvas { overflow-x: auto; overscroll-behavior-x: contain; padding: 1.5rem 1.25rem; font-size: 1rem; line-height: 1.65; }
.diagram-canvas svg { display: block; margin: 0 auto; }
.diagram-canvas:focus-visible { outline-offset: -4px; }
.diagram-canvas svg p, .diagram-viewer-content svg p { margin: 0; }

/* Source fallback: shown without JavaScript and when rendering fails. */
.diagram pre.mermaid { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; background: var(--card); color: var(--ink); font: .82rem/1.6 var(--mono); white-space: pre; tab-size: 4; }
.diagram pre.mermaid[hidden] { display: none; }
.diagram:is([data-state="pending"], [data-state="loading"]) pre.mermaid { display: none; }
.diagram:is([data-state="pending"], [data-state="loading"])::after { content: "Loading diagram…"; display: grid; place-items: center; min-height: 12rem; font: .65rem var(--mono); color: #5f5e55; text-transform: uppercase; letter-spacing: .08em; }
.diagram-error { margin: 0; padding: .6rem .9rem; border-top: 1px solid var(--rose-deep); background: var(--rose-soft); color: var(--ink); font: .72rem/1.5 var(--mono); }

/* Expanded viewer */
html.diagram-viewer-open { overflow: hidden; padding-right: var(--diagram-scrollbar, 0); }
.diagram-viewer { width: calc(100vw - 2rem); height: calc(100vh - 2rem); height: calc(100dvh - 2rem); max-width: none; max-height: none; margin: auto; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 8px 8px 0 var(--tone); overflow: hidden; }
.diagram-viewer::backdrop { background: #141413b3; }
.diagram-viewer-panel { display: flex; flex-direction: column; height: 100%; }
.diagram-viewer-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .5rem .6rem .5rem 1.1rem; border-bottom: 1px solid var(--ink); background: var(--tone); color: var(--on-tone); }
.diagram-viewer-bar :focus-visible { outline-color: var(--on-tone); }
.diagram-viewer-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .7rem/1.4 var(--mono); color: var(--on-tone); text-transform: uppercase; letter-spacing: .08em; }
.diagram-viewer-tools { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.diagram-viewer-tools button { min-width: 2.2rem; height: 2.2rem; padding: 0 .7rem; border: 1px solid var(--on-tone); background: transparent; color: var(--on-tone); font: .7rem var(--mono); cursor: pointer; }
.diagram-viewer-tools button:is([data-action="in"], [data-action="out"]) { padding: 0; font-size: 1.05rem; line-height: 1; }
.diagram-viewer-tools button:hover { border-color: var(--on-tone); background: var(--on-tone); color: var(--tone); }
.diagram-viewer-tools .diagram-viewer-close { margin-left: .4rem; background: var(--on-tone); color: var(--tone); }
.diagram-viewer-tools .diagram-viewer-close:hover { background: transparent; color: var(--on-tone); }
.diagram-viewer-tools :focus-visible { outline-offset: 2px; }
.diagram-viewer-level { min-width: 3.4rem; text-align: center; font: .68rem var(--mono); color: var(--on-tone); font-variant-numeric: tabular-nums; }
.diagram-viewer-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background-color: #faf9f5; background-image: radial-gradient(circle, #d8d6cc 1px, transparent 1.3px); background-size: 22px 22px; font-size: 1rem; line-height: 1.65; }
.diagram-viewer-stage.is-dragging { cursor: grabbing; }
.diagram-viewer-stage:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.diagram-viewer-content { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.diagram-viewer-content svg { display: block; max-width: none; }
.diagram-viewer-help { margin: 0; padding: .45rem 1.1rem; border-top: 1px solid var(--line); font: .62rem/1.6 var(--mono); color: var(--muted); }
.diagram-viewer-help kbd { font: inherit; padding: .05rem .3rem; border: 1px solid var(--line); background: var(--soft); }

@media (prefers-reduced-motion: no-preference) {
  .diagram-viewer-content.is-easing { transition: transform 150ms ease-out; }
  .diagram-viewer[open] { animation: diagram-viewer-in 140ms ease-out; }
  .diagram-viewer[open]::backdrop { animation: diagram-viewer-fade 140ms ease-out; }
}
@keyframes diagram-viewer-in { from { opacity: 0; transform: scale(.985); } }
@keyframes diagram-viewer-fade { from { opacity: 0; } }

@media (max-width: 760px) {
  .diagram-canvas { padding: 1rem .75rem; }
  .diagram-viewer { width: 100vw; height: 100vh; height: 100dvh; border: 0; box-shadow: none; }
  .diagram-viewer-bar { padding-left: .75rem; gap: .5rem; }
  .diagram-viewer-tools { gap: .25rem; }
  .diagram-viewer-tools .diagram-viewer-close { margin-left: .15rem; }
  .diagram-viewer-level { display: none; }
}

@media print {
  .diagram-expand { display: none !important; }
  .diagram:is([data-state="pending"], [data-state="loading"]) pre.mermaid { display: block; }
  .diagram:is([data-state="pending"], [data-state="loading"])::after { content: none; }
  .diagram-canvas { overflow: visible; }
}
/* Site search: header button and modal dialog. */
.search-button { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem .45rem .4rem .7rem; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: inherit; line-height: 1.2; cursor: pointer; }
.search-button[hidden] { display: none; }
.search-button:hover { border-color: var(--ink); color: var(--tone-deep); }
.search-kbd, .search-keys kbd { font: .62rem/1 var(--mono); padding: .3rem .4rem; border: 1px solid var(--line); background: var(--soft); color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.search-button:hover .search-kbd { border-color: var(--tone-deep); background: var(--tone-soft); color: var(--ink); }

/* Background stays put while the dialog is open. */
html.search-open { overflow: hidden; padding-right: var(--search-scrollbar, 0); }

.search-dialog { width: min(42rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100vh - 12vh - 1rem); max-height: calc(100dvh - 12vh - 1rem); margin: 12vh auto auto; padding: 0; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 10px 10px 0 var(--tone); overflow: hidden; }
.search-dialog[open] { display: flex; flex-direction: column; }
.search-dialog::backdrop { background: #14141399; }
.search-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 1.1rem 1.25rem .75rem; }
.search-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.search-label { font: 500 .67rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.search-close { padding: .3rem .5rem; border: 1px solid var(--line); background: var(--paper); color: var(--muted); font: .62rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.search-close:hover { border-color: var(--ink); color: var(--ink); }
.search-input { width: 100%; padding: .35rem 0 .7rem; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 1.7rem/1.2 var(--serif); letter-spacing: -.03em; appearance: none; }
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-bottom-color: var(--tone-deep); box-shadow: 0 1px 0 var(--tone-deep); }
.search-input:focus-visible { outline: none; }
.search-message { margin: 1rem 0 .5rem; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.search-message:empty, .search-message[hidden] { display: none; }

.search-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; margin: .75rem -1.25rem 0; padding: 0; border-top: 1px solid var(--line); }
.search-results[hidden] { display: none; }
.search-result { border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.search-result[aria-selected="true"] { background: var(--tone-soft); border-left-color: var(--tone-deep); }
.search-result a { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1.25rem .85rem calc(1.25rem - 3px); text-decoration: none; color: var(--ink); }
.search-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font: .6rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.search-number { padding: 0 .35rem; background: var(--tone-soft); color: var(--tone-deep); }
.search-title { font: 1.15rem/1.3 var(--serif); letter-spacing: -.02em; }
.search-heading { font-size: .82rem; font-weight: 600; line-height: 1.4; }
.search-section-mark { color: var(--tone-deep); font-weight: 400; }
.search-snippet { color: var(--muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.search-result mark { background: var(--tone-soft); color: var(--ink); box-shadow: inset 0 -2px var(--tone-deep); padding: 0 .05em; }
.search-result[aria-selected="true"] mark { background: var(--tone); color: var(--on-tone); }

.search-keys { display: flex; gap: 1.25rem; margin: 0 -1.25rem -.75rem; padding: .55rem 1.25rem; border-top: 1px solid var(--line); font: .62rem/1.6 var(--mono); color: var(--muted); }
.search-keys span { display: inline-flex; align-items: center; gap: .25rem; }
.search-keys kbd { padding: .15rem .3rem; }
.search-results:not([hidden]) + [role="status"] + .search-keys { border-top-color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .search-dialog[open] { animation: search-in 140ms ease-out; }
  .search-dialog[open]::backdrop { animation: search-fade 140ms ease-out; }
}
@keyframes search-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes search-fade { from { opacity: 0; } }

@media (max-width: 760px) {
  .search-button { padding: .4rem .6rem; }
  .search-kbd { display: none; }
  .search-dialog { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); margin-top: .5rem; box-shadow: 6px 6px 0 var(--tone); }
  .search-panel { padding: .9rem 1rem .6rem; }
  .search-input { font-size: 1.4rem; }
  .search-results { margin-inline: -1rem; }
  .search-result a { padding-inline: calc(1rem - 3px) 1rem; }
  .search-keys { display: none; }
}
/* The button needs room in the header: drop the brand name a little earlier than base.css does. */
@media (max-width: 480px) {
  .header-inner:has(.search-button:not([hidden])) .brand-name { display: none; }
  .site-header nav { gap: 1rem; }
}
@media (hover: none) and (pointer: coarse) {
  .search-kbd, .search-keys { display: none; }
}