/* ============================================================================
   Apache Kafka — Architecture Internals
   A hand-crafted documentation theme. Offline, dependency-free.
   ========================================================================== */

/* ----- Design tokens -------------------------------------------------------*/
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, "Inter", sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code",
    ui-monospace, "Menlo", Consolas, monospace;

  --sidebar-w: 19rem;
  --toc-w: 16rem;
  --content-max: 54rem;
  --radius: 8px;
  --radius-sm: 5px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --transition: 0.15s ease;
}

/* Light (default) */
:root {
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --bg-sunken: #eef0f3;
  --bg-code: #f6f8fa;
  --bg-sidebar: #fbfbfd;
  --surface: #ffffff;

  --fg: #1f2328;
  --fg-soft: #4a5159;
  --fg-muted: #6b7280;
  --fg-faint: #9aa1ab;

  --border: #e3e6ea;
  --border-strong: #d0d4da;

  --accent: #2563eb;          /* kafka-ish deep blue */
  --accent-soft: #dbeafe;
  --accent-fg: #1d4ed8;
  --link: #1a56db;

  --hl-keyword: #8250df;
  --hl-string: #0a7d34;
  --hl-comment: #6b7280;
  --hl-number: #b45309;

  --c-note: #2563eb;     --c-note-bg: #eff4ff;
  --c-rationale: #7c3aed;--c-rationale-bg: #f4effe;
  --c-gotcha: #d97706;   --c-gotcha-bg: #fff7ec;
  --c-invariant: #059669;--c-invariant-bg: #ecfdf5;
  --c-warning: #dc2626;  --c-warning-bg: #fef2f2;
  --c-key: #0891b2;      --c-key-bg: #ecfeff;
}

/* Dark */
:root[data-theme="dark"] {
  --bg: #0d1117;
  --bg-soft: #131922;
  --bg-sunken: #0a0e14;
  --bg-code: #161b22;
  --bg-sidebar: #0f141b;
  --surface: #11161d;

  --fg: #e6edf3;
  --fg-soft: #c2cad3;
  --fg-muted: #8b949e;
  --fg-faint: #6e7681;

  --border: #232a33;
  --border-strong: #30363d;

  --accent: #4d8bf5;
  --accent-soft: #16263f;
  --accent-fg: #79a9ff;
  --link: #6cb0ff;

  --hl-keyword: #d2a8ff;
  --hl-string: #7ee787;
  --hl-comment: #8b949e;
  --hl-number: #ffa657;

  --c-note: #4d8bf5;     --c-note-bg: #0f1b2d;
  --c-rationale: #a371f7;--c-rationale-bg: #1a1430;
  --c-gotcha: #e3a008;   --c-gotcha-bg: #241a06;
  --c-invariant: #2ea043;--c-invariant-bg: #0c1f14;
  --c-warning: #f85149;  --c-warning-bg: #2a0f0f;
  --c-key: #2bb6c9;      --c-key-bg: #06222a;

  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.45);
}

/* ----- Reset / base --------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ----- Top bar -------------------------------------------------------------*/
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: 3.5rem;
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.1rem;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 700; letter-spacing: -0.01em; color: var(--fg);
  font-size: 1.02rem; white-space: nowrap;
}
.topbar .brand .logo {
  width: 1.6rem; height: 1.6rem; border-radius: 6px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  color: #fff; font-weight: 800; font-size: 0.95rem;
}
.topbar .brand small {
  font-weight: 500; color: var(--fg-muted); font-size: 0.72rem;
  border: 1px solid var(--border-strong); padding: 1px 6px; border-radius: 999px;
}
.topbar .spacer { flex: 1; }
.topbar button.icon {
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-soft); width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm);
  cursor: pointer; display: grid; place-items: center; font-size: 1rem;
  transition: var(--transition);
}
.topbar button.icon:hover { background: var(--bg-soft); color: var(--fg); border-color: var(--border-strong); }
.topbar .menu-toggle { display: none; }

/* ----- Layout --------------------------------------------------------------*/
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
  align-items: start;
  max-width: 100rem; margin: 0 auto;
}

/* ----- Sidebar -------------------------------------------------------------*/
.sidebar {
  position: sticky; top: 3.5rem;
  height: calc(100vh - 3.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem 4rem;
}
.sidebar .filter {
  width: 100%; padding: 0.5rem 0.7rem; margin-bottom: 0.8rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--fg); font-size: 0.85rem; font-family: inherit;
}
.sidebar .filter:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.nav-group { margin-bottom: 1.1rem; }
.nav-group > .nav-group-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-faint);
  padding: 0 0.65rem; margin: 0 0 0.35rem;
}
.nav-group a {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.34rem 0.65rem; border-radius: var(--radius-sm);
  color: var(--fg-soft); font-size: 0.875rem; line-height: 1.35;
  transition: var(--transition);
}
.nav-group a .num {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-faint);
  flex: none; min-width: 1.25rem; font-weight: 600;
}
.nav-group a:hover { background: var(--bg-sunken); color: var(--fg); text-decoration: none; }
.nav-group a.active {
  background: var(--accent-soft); color: var(--accent-fg); font-weight: 600;
}
.nav-group a.active .num { color: var(--accent-fg); }

/* ----- Main content --------------------------------------------------------*/
main.content {
  min-width: 0;
  padding: 2.2rem clamp(1.2rem, 4vw, 3.2rem) 6rem;
}
.content-inner { max-width: var(--content-max); margin: 0 auto; }

.breadcrumb { font-size: 0.8rem; color: var(--fg-muted); margin-bottom: 0.6rem; }
.breadcrumb a { color: var(--fg-muted); }

article h1 {
  font-size: 2.05rem; line-height: 1.18; letter-spacing: -0.02em;
  margin: 0.2rem 0 0.4rem; font-weight: 800;
}
article h2 {
  font-size: 1.42rem; letter-spacing: -0.01em; margin: 2.6rem 0 0.9rem;
  padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); font-weight: 700;
  scroll-margin-top: 4.5rem;
}
article h3 {
  font-size: 1.13rem; margin: 1.9rem 0 0.6rem; font-weight: 700; color: var(--fg);
  scroll-margin-top: 4.5rem;
}
article h4 {
  font-size: 0.98rem; margin: 1.4rem 0 0.4rem; font-weight: 700;
  color: var(--fg-soft); text-transform: none; scroll-margin-top: 4.5rem;
}
article p { margin: 0.75rem 0; color: var(--fg); }
article ul, article ol { margin: 0.7rem 0; padding-left: 1.4rem; }
article li { margin: 0.32rem 0; }
article li::marker { color: var(--fg-faint); }
article strong { font-weight: 700; color: var(--fg); }
article hr { border: none; border-top: 1px solid var(--border); margin: 2.2rem 0; }

/* heading anchors */
.heading-anchor {
  opacity: 0; margin-left: 0.4rem; font-weight: 400; color: var(--fg-faint);
  text-decoration: none; font-size: 0.8em;
}
h2:hover .heading-anchor, h3:hover .heading-anchor, h4:hover .heading-anchor { opacity: 1; }

/* lead / abstract */
.lead {
  font-size: 1.08rem; color: var(--fg-soft); line-height: 1.6;
  border-left: 3px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; margin: 1.1rem 0 1.5rem;
}

/* provenance blockquote */
.provenance {
  font-size: 0.8rem; color: var(--fg-muted); background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; margin: 0 0 1.4rem;
}
.provenance code { background: transparent; padding: 0; color: var(--fg-soft); }

/* ----- Inline code & links -------------------------------------------------*/
code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--bg-code); border: 1px solid var(--border);
  padding: 0.08em 0.36em; border-radius: 4px; color: var(--accent-fg);
  word-break: break-word;
}
:root[data-theme="dark"] code { color: #a9c7ff; }

/* file:line citations */
.cite, code.cite {
  font-size: 0.78em; color: var(--fg-muted);
  background: var(--bg-soft); border: 1px dashed var(--border-strong);
  border-radius: 4px; padding: 0.05em 0.35em; white-space: nowrap;
  text-decoration: none;
}
a.cite:hover { color: var(--accent-fg); border-color: var(--accent); }
.src-ref { color: var(--fg-faint); font-size: 0.8em; }

/* ----- Code blocks ---------------------------------------------------------*/
pre {
  position: relative;
  background: var(--bg-code); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 1.1rem 0;
  overflow-x: auto; font-family: var(--font-mono); font-size: 0.83rem;
  line-height: 1.55; tab-size: 2; -moz-tab-size: 2;
}
pre code { background: none; border: none; padding: 0; font-size: inherit; color: var(--fg-soft); }
pre .cm { color: var(--hl-comment); font-style: italic; }
pre .kw { color: var(--hl-keyword); }
pre .st { color: var(--hl-string); }
pre .nm { color: var(--hl-number); }

/* copy button */
.copy-btn {
  position: absolute; top: 0.5rem; right: 0.5rem;
  font-size: 0.7rem; font-family: var(--font-sans);
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--fg-muted); padding: 0.2rem 0.5rem; border-radius: 4px;
  cursor: pointer; opacity: 0; transition: var(--transition);
}
pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--fg); background: var(--bg-soft); }
.copy-btn.copied { color: var(--c-invariant); border-color: var(--c-invariant); }

/* ----- ASCII diagrams ------------------------------------------------------*/
pre.diagram, figure.diagram pre {
  background: var(--bg-sunken);
  border: 1px solid var(--border-strong);
  color: var(--fg-soft); font-size: 0.78rem; line-height: 1.45;
  border-radius: var(--radius);
}
figure.diagram {
  margin: 1.6rem 0; padding: 1.1rem 1.1rem 0.4rem;
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0) 0 0 / 22px 22px,
    var(--canvas);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); overflow-x: auto;
}
figure.diagram > pre.diagram,
figure.diagram > pre:not(.mermaid) { margin: 0 0 0.4rem; background: transparent; border: none; box-shadow: none; }
figure.diagram figcaption {
  font-size: 0.78rem; color: var(--fg-muted); text-align: center;
  margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px dashed var(--border);
  font-style: italic;
}

/* ----- Tables --------------------------------------------------------------*/
.table-wrap { overflow-x: auto; margin: 1.1rem 0; }
table {
  border-collapse: collapse; width: 100%; font-size: 0.86rem;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
thead th {
  background: var(--bg-soft); text-align: left; font-weight: 700;
  color: var(--fg-soft); padding: 0.55rem 0.75rem; border-bottom: 2px solid var(--border-strong);
  white-space: nowrap;
}
tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--bg-soft); }
table code { font-size: 0.82em; }

/* ----- Callouts ------------------------------------------------------------*/
.callout {
  position: relative; margin: 1.3rem 0; padding: 0.85rem 1rem 0.85rem 2.6rem;
  border-radius: var(--radius); border: 1px solid var(--border);
  border-left: 4px solid var(--fg-muted); background: var(--bg-soft); font-size: 0.92rem;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout::before {
  position: absolute; left: 0.8rem; top: 0.85rem; font-size: 1rem; line-height: 1;
}
.callout .callout-title {
  font-weight: 700; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 0.3rem; display: block;
}
.callout.note      { border-left-color: var(--c-note); background: var(--c-note-bg); }
.callout.note::before { content: "ℹ"; color: var(--c-note); }
.callout.note .callout-title { color: var(--c-note); }
.callout.rationale { border-left-color: var(--c-rationale); background: var(--c-rationale-bg); }
.callout.rationale::before { content: "✦"; color: var(--c-rationale); }
.callout.rationale .callout-title { color: var(--c-rationale); }
.callout.gotcha    { border-left-color: var(--c-gotcha); background: var(--c-gotcha-bg); }
.callout.gotcha::before { content: "⚠"; color: var(--c-gotcha); }
.callout.gotcha .callout-title { color: var(--c-gotcha); }
.callout.invariant { border-left-color: var(--c-invariant); background: var(--c-invariant-bg); }
.callout.invariant::before { content: "✓"; color: var(--c-invariant); }
.callout.invariant .callout-title { color: var(--c-invariant); }
.callout.warning   { border-left-color: var(--c-warning); background: var(--c-warning-bg); }
.callout.warning::before { content: "✕"; color: var(--c-warning); }
.callout.warning .callout-title { color: var(--c-warning); }
.callout.key       { border-left-color: var(--c-key); background: var(--c-key-bg); }
.callout.key::before { content: "★"; color: var(--c-key); }
.callout.key .callout-title { color: var(--c-key); }

/* key/value definition grid */
dl.kv { display: grid; grid-template-columns: minmax(7rem, 22rem) 1fr; gap: 0.4rem 1.2rem; margin: 1rem 0; align-items: baseline; }
dl.kv dt { font-family: var(--font-mono); font-size: 0.83rem; color: var(--accent-fg); font-weight: 600; overflow-wrap: break-word; min-width: 0; }
dl.kv dd { margin: 0; color: var(--fg-soft); }

/* pill / badge */
.pill {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  padding: 0.08rem 0.5rem; border-radius: 999px; border: 1px solid var(--border-strong);
  color: var(--fg-muted); background: var(--bg-soft); vertical-align: middle;
}
.pill.kip { color: var(--c-rationale); border-color: var(--c-rationale); background: var(--c-rationale-bg); }

/* ----- Right-hand TOC ------------------------------------------------------*/
.toc {
  position: sticky; top: 3.5rem;
  height: calc(100vh - 3.5rem); overflow-y: auto;
  padding: 2.2rem 1rem 4rem 0.5rem; font-size: 0.82rem;
}
.toc .toc-title {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--fg-faint); margin-bottom: 0.6rem;
}
.toc a {
  display: block; padding: 0.18rem 0.6rem; color: var(--fg-muted);
  border-left: 2px solid var(--border); line-height: 1.35; transition: var(--transition);
}
.toc a:hover { color: var(--fg); text-decoration: none; }
.toc a.h3 { padding-left: 1.4rem; font-size: 0.78rem; }
.toc a.active { color: var(--accent-fg); border-left-color: var(--accent); font-weight: 600; }

/* ----- Prev/next footer ----------------------------------------------------*/
.page-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.page-nav a {
  flex: 1; max-width: 48%; padding: 0.8rem 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); transition: var(--transition); background: var(--surface);
}
.page-nav a:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); text-decoration: none; }
.page-nav a.next { text-align: right; margin-left: auto; }
.page-nav .dir { font-size: 0.72rem; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.page-nav .ttl { font-weight: 600; color: var(--accent-fg); }

.footer-meta { margin-top: 2.5rem; font-size: 0.78rem; color: var(--fg-faint); text-align: center; }

/* ----- Landing page (index) ------------------------------------------------*/
.hero {
  padding: 3rem 0 2rem; text-align: center; border-bottom: 1px solid var(--border); margin-bottom: 2rem;
}
.hero h1 { font-size: 2.8rem; letter-spacing: -0.03em; margin: 0 0 0.6rem; }
.hero p { font-size: 1.12rem; color: var(--fg-soft); max-width: 42rem; margin: 0.4rem auto; }
.hero .hero-meta { margin-top: 1.2rem; display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card {
  display: block; padding: 1.1rem 1.2rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); transition: var(--transition);
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-2px); }
.card .card-num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); font-weight: 700; }
.card .card-title { font-weight: 700; color: var(--fg); margin: 0.2rem 0 0.3rem; font-size: 1.02rem; }
.card .card-desc { font-size: 0.85rem; color: var(--fg-muted); line-height: 1.5; }
.section-label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint); margin: 2rem 0 0.2rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border);
}

/* ----- Responsive ----------------------------------------------------------*/
@media (max-width: 1200px) {
  :root { --toc-w: 0px; }
  .layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .topbar .menu-toggle { display: grid; }
  .sidebar {
    position: fixed; top: 3.5rem; left: 0; width: min(20rem, 82vw); z-index: 40;
    transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: var(--shadow-md);
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: 3.5rem 0 0; background: rgba(0,0,0,0.4); z-index: 35; display: none; }
  .scrim.show { display: block; }
  article h1 { font-size: 1.7rem; }
  .hero h1 { font-size: 2.1rem; }
}

/* ----- Scrollbars ----------------------------------------------------------*/
.sidebar::-webkit-scrollbar, .toc::-webkit-scrollbar, pre::-webkit-scrollbar { width: 9px; height: 9px; }
.sidebar::-webkit-scrollbar-thumb, .toc::-webkit-scrollbar-thumb, pre::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 6px;
}
.sidebar::-webkit-scrollbar-thumb:hover, .toc::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* ----- Print ---------------------------------------------------------------*/
@media print {
  .topbar, .sidebar, .toc, .page-nav, .copy-btn, .scrim { display: none !important; }
  .layout { grid-template-columns: 1fr; }
  main.content { padding: 0; }
  article h2 { page-break-after: avoid; }
  pre, table, figure { page-break-inside: avoid; }
  a { color: var(--fg); }
}

/* ====== Diagram canvas tokens ============================================= */
:root { --canvas: #fbfcfe; --dot: #e7ebf1; }
:root[data-theme="dark"] { --canvas: #0b1119; --dot: #1b2430; }

/* ====== Mermaid diagrams ================================================== */
figure.diagram .mermaid {
  margin: 0 auto 0.3rem; text-align: center; line-height: normal;
  background: transparent; border: none; padding: 0.2rem 0; overflow-x: auto;
}
figure.diagram .mermaid:not([data-processed]) { color: transparent; min-height: 2rem; } /* hide raw source pre-render */
figure.diagram .mermaid svg { max-width: 100%; height: auto; }
.mermaid .edgeLabel, .mermaid .nodeLabel, .mermaid span { font-family: var(--font-sans) !important; }
.mermaid .cluster rect { rx: 8; }

/* ====== Byte-map: visual binary layouts =================================== */
.bytemap {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0.2rem 0 0.4rem;
  font-family: var(--font-mono);
}
.bytemap.fixed { flex-wrap: nowrap; }
.bf {
  flex: var(--w, 1) 1 0; min-width: 4.2rem;
  border: 1px solid var(--bf-bd, var(--border-strong)); border-radius: 6px;
  background: var(--bf-bg, var(--bg-soft)); padding: 0.4rem 0.55rem;
  display: flex; flex-direction: column; gap: 0.15rem; position: relative;
}
.bf-name { font-weight: 700; font-size: 0.8rem; color: var(--fg); line-height: 1.2; word-break: break-word; }
.bf-meta { font-size: 0.66rem; color: var(--fg-muted); text-transform: none; letter-spacing: 0.02em; }
/* field hues (cycle) — used via class .c1..c6 or auto by nth-of-type */
.bf.c1, .bytemap .bf:nth-of-type(6n+1) { --bf-bg: var(--c-note-bg);      --bf-bd: var(--c-note); }
.bf.c2, .bytemap .bf:nth-of-type(6n+2) { --bf-bg: var(--c-rationale-bg); --bf-bd: var(--c-rationale); }
.bf.c3, .bytemap .bf:nth-of-type(6n+3) { --bf-bg: var(--c-invariant-bg); --bf-bd: var(--c-invariant); }
.bf.c4, .bytemap .bf:nth-of-type(6n+4) { --bf-bg: var(--c-gotcha-bg);    --bf-bd: var(--c-gotcha); }
.bf.c5, .bytemap .bf:nth-of-type(6n+5) { --bf-bg: var(--c-key-bg);       --bf-bd: var(--c-key); }
.bf.c6, .bytemap .bf:nth-of-type(6n+6) { --bf-bg: var(--c-warning-bg);   --bf-bd: var(--c-warning); }
.bf .bf-name { color: var(--bf-bd); filter: saturate(1.4) brightness(0.85); }
:root[data-theme="dark"] .bf .bf-name { filter: none; color: var(--fg); }
/* optional small tag for the byte offset on the field */
.bf-off {
  position: absolute; top: -0.62rem; left: 0.4rem; font-size: 0.6rem;
  background: var(--bg); color: var(--fg-faint); padding: 0 0.25rem; border-radius: 3px;
}
.bytemap-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--fg-muted); margin-top: 0.5rem; }
.bytemap-legend span::before { content: "■ "; }

/* ====== Hero polish ======================================================= */
.hero {
  background:
    radial-gradient(1200px 320px at 50% -120px, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  border-radius: var(--radius);
}
.hero h1 {
  background: linear-gradient(120deg, var(--fg), color-mix(in srgb, var(--accent) 75%, var(--fg)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ========================================================================== */
/* DIAGRAM DESIGN SYSTEM — semantic colors, legend, bespoke components         */
/* ========================================================================== */
:root {
  --cat-client: var(--c-note);      --cat-client-bg: var(--c-note-bg);
  --cat-broker: var(--c-rationale); --cat-broker-bg: var(--c-rationale-bg);
  --cat-storage: var(--c-invariant);--cat-storage-bg: var(--c-invariant-bg);
  --cat-control: var(--c-gotcha);   --cat-control-bg: var(--c-gotcha-bg);
  --cat-coord: var(--c-key);        --cat-coord-bg: var(--c-key-bg);
  --cat-error: var(--c-warning);    --cat-error-bg: var(--c-warning-bg);
}

/* ----- Legend (attach to every diagram) ----------------------------------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem;
  margin: 0.7rem 0 0.1rem; padding: 0.6rem 0.2rem 0;
  border-top: 1px dashed var(--border); font-size: 0.73rem; color: var(--fg-muted);
}
.legend .lgi { display: inline-flex; align-items: center; gap: 0.42rem; line-height: 1.2; }
.legend .sw { width: 0.85rem; height: 0.85rem; border-radius: 4px; flex: none;
  background: var(--c, var(--bg-soft)); border: 1.5px solid var(--cc, var(--border-strong)); }
.legend .sw.round { border-radius: 50%; }
.legend .sw.cyl { border-radius: 4px / 9px; }
.legend .sw.dash { border-style: dashed; background: transparent; }
.legend .arr { width: 1.5rem; height: 0; flex: none; position: relative; border-top: 2px solid var(--cc, var(--fg-muted)); }
.legend .arr.dashed { border-top-style: dashed; }
.legend .arr::after { content: ""; position: absolute; right: -1px; top: -3px;
  border: 3px solid transparent; border-left-color: var(--cc, var(--fg-muted)); }
.legend .mono { font-family: var(--font-mono); color: var(--accent-fg); }
.legend b { color: var(--fg-soft); font-weight: 600; }
.cat-client   { --c: var(--cat-client-bg);  --cc: var(--cat-client); }
.cat-broker   { --c: var(--cat-broker-bg);  --cc: var(--cat-broker); }
.cat-storage  { --c: var(--cat-storage-bg); --cc: var(--cat-storage); }
.cat-control  { --c: var(--cat-control-bg); --cc: var(--cat-control); }
.cat-coord    { --c: var(--cat-coord-bg);   --cc: var(--cat-coord); }
.cat-error    { --c: var(--cat-error-bg);   --cc: var(--cat-error); }

/* ----- Log strip: the iconic partition commit log ------------------------- */
.logstrip { margin: 0.4rem 0 0.2rem; }
.logstrip .ls-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.78rem; color: var(--fg-muted); margin-bottom: 0.5rem;
}
.logstrip .ls-head .ttl { font-weight: 700; color: var(--fg-soft); }
.logstrip .ls-head .ttl .q { color: var(--accent-fg); font-family: var(--font-mono); }
.logstrip .ls-head .append { color: var(--cat-client); font-weight: 600; }
.logstrip .cells { display: flex; gap: 4px; align-items: stretch; }
.logstrip .cell {
  flex: 1 1 0; min-width: 2.1rem; position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 2.6rem; font-family: var(--font-mono); font-weight: 600; font-size: 0.92rem;
  border: 1.5px solid var(--border-strong); border-radius: 7px; background: var(--bg-soft);
  color: var(--fg-soft);
}
.logstrip .cell.committed { background: var(--cat-storage-bg); border-color: var(--cat-storage); color: var(--cat-storage); }
:root[data-theme="dark"] .logstrip .cell.committed { color: var(--fg); }
.logstrip .cell.pending { background: var(--cat-control-bg); border-color: var(--cat-control); border-style: dashed; color: var(--cat-control); }
.logstrip .cell.next { background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--bg-sunken) 5px, var(--bg-sunken) 10px);
  border-style: dashed; color: var(--fg-faint); }
.logstrip .cell .tag {
  position: absolute; top: -0.72rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 0.05rem 0.32rem; border-radius: 999px; white-space: nowrap; color: #fff;
}
.logstrip .cell .tag.hw { background: var(--cat-storage); }
.logstrip .cell .tag.leo { background: var(--fg-muted); }
.logstrip .marks { display: flex; gap: 4px; margin-top: 0.3rem; }
.logstrip .marks .mslot { flex: 1 1 0; min-width: 2.1rem; display: flex; justify-content: center; }
.logstrip .marks .mk {
  font-size: 0.62rem; font-weight: 600; line-height: 1.25; text-align: center;
  padding: 0.12rem 0.34rem; border-radius: 5px; position: relative; margin-top: 0.5rem;
  background: var(--cat-client-bg); border: 1px solid var(--cat-client); color: var(--cat-client);
}
.logstrip .marks .mk::before { content: "▲"; position: absolute; top: -0.62rem; left: 50%; transform: translateX(-50%); font-size: 0.6rem; color: var(--cat-client); }
.logstrip .marks .mk.b { background: var(--cat-coord-bg); border-color: var(--cat-coord); color: var(--cat-coord); }
.logstrip .marks .mk.b::before { color: var(--cat-coord); }

/* ----- Byte-map: add an offset ruler refinement --------------------------- */
.bytemap .bf .bf-name { letter-spacing: -0.01em; }
.bytemap-rule { display: flex; gap: 4px; margin-top: 3px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--fg-faint); }
.bytemap-rule .rb { text-align: left; }

/* ----- Mermaid: refine node typography & edges via base theme ------------- */
figure.diagram .mermaid .nodeLabel, figure.diagram .mermaid .edgeLabel { font-size: 0.84rem; }
figure.diagram .mermaid .node rect, figure.diagram .mermaid .node polygon,
figure.diagram .mermaid .node circle, figure.diagram .mermaid .node path { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08)); }

/* ----- dflow: bespoke pipeline / flow ------------------------------------- */
.dflow { display: flex; flex-direction: column; align-items: center; }
.dflow.h { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; }
.dflow .node {
  border: 1.5px solid var(--cc, var(--border-strong)); background: var(--c, var(--surface));
  color: var(--fg); border-radius: 9px; padding: 0.5rem 0.8rem; text-align: center;
  font-size: 0.83rem; line-height: 1.3; max-width: 30rem; box-shadow: var(--shadow-sm);
}
.dflow .node .nt { font-weight: 700; display: block; }
.dflow .node .nd { font-size: 0.73rem; color: var(--fg-muted); margin-top: 0.1rem; }
.dflow .node .mono, .dflow .node code { font-family: var(--font-mono); font-size: 0.92em; }
.dflow .node.pill { border-radius: 999px; }
.dflow .node.store { border-radius: 7px / 15px; }            /* cylinder hint */
.dflow .node.decision { border-radius: 999px; font-style: italic; }
.dflow .conn { width: 0; border-left: 2px solid var(--ec, var(--fg-faint)); height: 1.7rem; position: relative; margin: 0.05rem 0; }
.dflow .conn::after { content: ""; position: absolute; bottom: -1px; left: -4px; border: 4px solid transparent; border-top-color: var(--ec, var(--fg-faint)); }
.dflow .conn.dashed { border-left-style: dashed; }
.dflow .conn[data-label]::before {
  content: attr(data-label); position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 0.7rem; color: var(--fg-muted); background: var(--canvas); padding: 0 0.3rem;
}
.dflow.h .conn { width: 2rem; height: 0; border-left: none; border-top: 2px solid var(--ec, var(--fg-faint)); margin: 0 0.1rem; }
.dflow.h .conn::after { bottom: auto; top: -4px; right: -1px; left: auto; border: 4px solid transparent; border-left-color: var(--ec, var(--fg-faint)); }
.dflow.h .conn.dashed { border-top-style: dashed; }
.dflow.h .conn[data-label]::before { left: 50%; top: -1.15rem; transform: translateX(-50%); }
.dflow .row { display: flex; gap: 1.6rem; align-items: flex-start; justify-content: center; position: relative; }
.dflow .col { flex: 1 1 auto; min-width: 7rem; max-width: 24rem; display: flex; flex-direction: column; align-items: center; position: relative; }
/* fork manifold: a continuous horizontal bar joining the branch columns at their tops,
   built from per-column segments that run from each column centre and bridge half the
   flex-gap (0.8rem) to meet the neighbour — works for any column count or width. */
.dflow .col::before { content: ""; position: absolute; top: 0; height: 0; border-top: 2px solid var(--fg-faint); left: -0.8rem; right: -0.8rem; }
.dflow .col:first-child::before { left: 50%; }
.dflow .col:last-child::before { right: 50%; }
.dflow .col:only-child::before { display: none; }
.dflow .col > .conn:first-child { margin-top: 0; }
/* the connector feeding a fork is a plain stem down to the manifold — drop its arrowhead */
.dflow > .conn:has(+ .row)::after,
.dflow .col > .conn:has(+ .row)::after { display: none; }
.dflow .ec-data { --ec: var(--cat-broker); } .dflow .ec-async { --ec: var(--cat-coord); } .dflow .ec-err { --ec: var(--cat-error); }

/* ----- dstack: layered architecture / planes ------------------------------ */
.dstack { display: flex; flex-direction: column; gap: 5px; }
.dstack .layer {
  border: 1.5px solid var(--cc, var(--border-strong)); background: var(--c, var(--bg-soft));
  border-radius: 9px; padding: 0.55rem 0.85rem;
}
.dstack .layer .ln { font-weight: 700; color: var(--fg); font-size: 0.88rem; }
.dstack .layer .ld { font-size: 0.76rem; color: var(--fg-muted); margin-top: 0.12rem; }
.dstack .layer .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 0.4rem; }
.dstack .layer .chip {
  font-family: var(--font-mono); font-size: 0.72rem; padding: 0.2rem 0.5rem;
  border: 1px solid var(--border-strong); border-radius: 6px; background: var(--bg); color: var(--fg-soft);
}
.dstack .layer.sub { margin-left: 1.4rem; }
.dstack .sep { text-align: center; color: var(--fg-faint); font-size: 0.9rem; line-height: 0.6; }

/* ----- dseq: bespoke sequence diagram (lanes + messages) ------------------ */
.dseq { --cols: 2; }
.dseq .lanes { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; margin-bottom: 0.3rem; }
.dseq .lanes .actor {
  text-align: center; font-weight: 700; font-size: 0.79rem; margin: 0 0.4rem;
  border: 1.5px solid var(--cc, var(--border-strong)); background: var(--c, var(--surface));
  color: var(--fg); border-radius: 7px; padding: 0.35rem 0.25rem; align-self: start;
}
.dseq .body { position: relative; padding: 0.2rem 0; }
.dseq .body .lifelines { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); pointer-events: none; }
.dseq .body .lifelines i { width: 0; border-left: 1.5px dashed var(--border); justify-self: center; }
.dseq .m { position: relative; height: 2.05rem; }
.dseq .m .ml {
  position: absolute; top: 0; font-size: 0.71rem; color: var(--fg-soft); line-height: 1.15;
  background: var(--canvas); padding: 0 0.3rem; white-space: nowrap;
  left: calc((var(--from) - 0.5) / var(--cols) * 100%); transform: translateX(-2px);
}
.dseq .m.l .ml { transform: translateX(calc(-100% + 2px)); }
.dseq .m .ln {
  position: absolute; top: 1.35rem; height: 0; border-top: 2px solid var(--ec, var(--cat-broker));
  left: calc((min(var(--from), var(--to)) - 0.5) / var(--cols) * 100%);
  width: calc((max(var(--from), var(--to)) - min(var(--from), var(--to))) / var(--cols) * 100%);
}
.dseq .m.dashed .ln { border-top-style: dashed; }
.dseq .m.r .ln::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left-color: var(--ec, var(--cat-broker)); }
.dseq .m.l .ln::after { content: ""; position: absolute; left: -1px; top: -4px; border: 4px solid transparent; border-right-color: var(--ec, var(--cat-broker)); }
.dseq .m.self .ln { width: calc(0.5 / var(--cols) * 100%); border-right: 2px solid var(--ec, var(--cat-broker)); border-radius: 0 6px 6px 0; height: 0.7rem; top: 1rem; }
.dseq .note {
  margin: 0.35rem 12%; text-align: center; font-size: 0.71rem; color: var(--fg);
  background: var(--c-gotcha-bg); border: 1px solid var(--c-gotcha); border-radius: 6px; padding: 0.25rem 0.4rem;
}

/* ----- dstate: bespoke state machine -------------------------------------- */
.dstate { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.15rem 0.2rem; }
.dstate.v { flex-direction: column; }
.dstate .st {
  font-family: var(--font-mono); font-weight: 600; font-size: 0.81rem;
  border: 1.5px solid var(--cc, var(--cat-coord)); background: var(--c, var(--cat-coord-bg)); color: var(--cc, var(--cat-coord));
  border-radius: 999px; padding: 0.4rem 0.85rem; white-space: nowrap;
}
:root[data-theme="dark"] .dstate .st { color: var(--fg); }
.dstate .st.accent { --c: var(--cat-invariant-bg); --cc: var(--cat-invariant); }
.dstate .st.warn { --c: var(--cat-error-bg); --cc: var(--cat-error); }
.dstate .term { width: 0.95rem; height: 0.95rem; border-radius: 50%; background: var(--fg-soft); flex: none; }
.dstate .term.end { background: var(--bg); border: 2px solid var(--fg-soft); box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3px var(--fg-soft); }
.dstate .tr { display: inline-flex; flex-direction: column; align-items: center; min-width: 2.6rem; color: var(--fg-muted); }
.dstate .tr .tl { font-size: 0.68rem; white-space: nowrap; margin-bottom: 1px; }
.dstate .tr .ta { width: 100%; min-width: 1.8rem; height: 0; border-top: 2px solid var(--fg-faint); position: relative; }
.dstate .tr .ta::after { content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left-color: var(--fg-faint); }
.dstate.v .tr { flex-direction: column; min-width: 0; }
.dstate.v .tr .ta { width: 0; min-width: 0; height: 1.4rem; border-top: none; border-left: 2px solid var(--fg-faint); }
.dstate.v .tr .ta::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 4px solid transparent; border-top-color: var(--fg-faint); }

/* ----- Sidebar part dividers (Part I / II / III) -------------------------- */
.nav-part {
  font-size: 0.84rem; font-weight: 800; letter-spacing: -0.01em; color: var(--fg);
  padding: 0.9rem 0.65rem 0.5rem; margin-top: 0.7rem;
  border-top: 1px solid var(--border); position: relative;
}
.nav-part::before {
  content: ""; position: absolute; left: 0.65rem; top: 0.9rem; width: 2.2rem; height: 3px;
  border-radius: 2px; background: linear-gradient(90deg, var(--accent), #7c3aed);
}
.nav-part { padding-top: 1.3rem; }
.sidebar .filter + .nav-part { border-top: none; margin-top: 0.2rem; }

/* ----- Index: part headings ----------------------------------------------- */
.part-head { margin: 2.8rem 0 0.6rem; padding-top: 1.4rem; border-top: 2px solid var(--border); }
.part-head:first-of-type { margin-top: 1rem; border-top: none; padding-top: 0; }
.part-head h2 { font-size: 1.7rem; border: none; margin: 0 0 0.25rem; padding: 0; }
.part-head p { color: var(--fg-muted); font-size: 0.95rem; margin: 0; max-width: 52rem; }

/* ==========================================================================
   COMPUTER MODERN RE-SKIN  (append-only override; loads after everything)
   --------------------------------------------------------------------------
   Goal: make the whole site read like the krivaltsevich.com book theme —
   self-hosted Computer Modern type, monochrome chrome & prose on neutral
   paper-white (#f6f6f6) carrying a faint prime-tiled fractal grain, calm
   charcoal dark mode — WITHOUT touching HTML, layout, or the diagram
   semantic-colour system. Colour now appears ONLY inside figures/diagrams.

   Strategy:
   (a) @font-face for CMU Serif + CMU Typewriter (same woff filenames as the
       personal site, copied into assets/fonts/).
   (b) Re-point the font tokens (--font-sans → serif, --font-mono → CM TT).
   (c) Neutralise the CHROME/PROSE colour tokens to ink/paper monochrome:
       --bg* / --surface / --fg* / --border* / --accent* / --link / --hl-*.
       These tokens are used only by chrome + prose, never by --cat-* figures.
   (d) Add the paper grain to the body background.
   (e) A handful of targeted rule overrides for spots that hard-code colour
       or a gradient and cannot be reached by a variable (brand logo, hero,
       nav-part bar, dark prose-code colour, calmer figure plate).
   LEFT INTACT: every --c-* and --cat-* token, and all diagram components
   (logstrip, bytemap/.bf, dflow, dstack, dseq, dstate, legend, mermaid) —
   so categories stay distinguishable and every legend still reads.
   ========================================================================== */

/* (a) ---- Self-hosted Computer Modern --------------------------------------*/
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 400;
  src: url("fonts/cmunrm.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 400;
  src: url("fonts/cmunti.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CMU Serif"; font-style: normal; font-weight: 700;
  src: url("fonts/cmunbx.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CMU Serif"; font-style: italic; font-weight: 700;
  src: url("fonts/cmunbi.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CMU Typewriter"; font-style: normal; font-weight: 400;
  src: url("fonts/cmuntt.woff") format("woff"); font-display: swap; }
@font-face { font-family: "CMU Typewriter"; font-style: normal; font-weight: 700;
  src: url("fonts/cmuntb.woff") format("woff"); font-display: swap; }
/* Source Serif 4: a screen-readable book serif for the running prose. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400;
  src: url("fonts/source-serif-4-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400;
  src: url("fonts/source-serif-4-400-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600;
  src: url("fonts/source-serif-4-600-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 700;
  src: url("fonts/source-serif-4-700-normal.woff2") format("woff2"); font-display: swap; }

/* (b)+(c) ---- Re-point font tokens & monochrome the chrome/prose tokens -----*/
:root {
  /* prose: screen-readable serif; headings: Computer Modern; diagrams: base sans */
  --font-serif: "Source Serif 4", "CMU Serif", Georgia, "Times New Roman", serif;
  --font-mono: "CMU Typewriter", "Latin Modern Mono", "SF Mono", "Consolas", ui-monospace, monospace;

  /* paper-white surfaces (light) */
  --bg: #f6f6f6;          /* neutral paper-white, not pure white */
  --bg-soft: #efefee;     /* faint shade for soft panels / table stripes */
  --bg-sunken: #e9e9e7;   /* sunken wells (ascii diagrams, "next" cells) */
  --bg-code: #ececec;     /* inline-code & code-block ground (=personal --shade) */
  --bg-sidebar: #f1f1f0;  /* sidebar barely distinct from page */
  --surface: #f6f6f6;     /* cards / popovers sit flush with paper */

  /* ink scale (light) */
  --fg: #1b1b1a;          /* near-black, neutral */
  --fg-soft: #3a3a39;     /* strong secondary (body emphasis, th) */
  --fg-muted: #5e5e5c;    /* captions / meta (=personal --ink-soft) */
  --fg-faint: #7e7e7c;    /* faintest (markers, nums, rules-as-text).
                             Darkened from #8a8a88: faint text also lands on the
                             sunken well (--bg-sunken, ascii diagrams / logstrip
                             "next" cell) where #8a8a88 was 2.85:1 — below the
                             3:1 floor. #7e7e7c clears it (3.35:1) and stays faint
                             vs the 15.95:1 body ink. */

  /* hairlines (light) */
  --border: #d9d9d7;      /* hairline rule (=personal --rule) */
  --border-strong: #c4c4c1;

  /* accent → INK. The accent only paints chrome/prose (links, active nav/toc,
     inline-code text, kv terms, brand). Monochrome keeps colour out of prose. */
  --accent: #1b1b1a;
  --accent-soft: #e3e3e1;  /* active-nav background: a quiet grey wash */
  --accent-fg: #1b1b1a;    /* "coloured" prose code / kv dt / active link → ink */
  --link: #1b1b1a;         /* links are ink; underline carries the affordance */

  /* prose syntax highlighting → graphite monochrome (book listings, not IDE) */
  --hl-keyword: #1b1b1a;
  --hl-string:  #3a3a39;
  --hl-comment: #8a8a88;
  --hl-number:  #3a3a39;

  /* Quiet the figure FILL tints so colour sits calmly on paper. Hues (the
     stroke/text --c-* values) are otherwise UNCHANGED, so categories stay
     distinct and legends read; only the pale background washes are
     de-saturated a touch. */
  --c-note-bg:      #eef1f5;
  --c-rationale-bg: #f0eef5;
  --c-gotcha-bg:    #f4efe7;
  --c-invariant-bg: #e9f1ec;
  --c-warning-bg:   #f4ecec;
  --c-key-bg:       #e8f0f1;
  /* ONE hue corrected for contrast: amber #d97706 (control) was only 2.78:1 on
     its wash / 2.95:1 on paper — control text in cat-control nodes, logstrip
     ".pending" cells and ".dseq .note" borders failed the 3:1 floor in light
     mode. Darken to #9a6a10 → 4.0–4.4:1, still unmistakably amber. (Dark-mode
     amber #e3a008 is fine at 7.4:1, so it is left as-is.) */
  --c-gotcha:       #9a6a10;

  /* book-ish geometry: tighter radii, near-flat shadows */
  --radius: 5px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 0 rgba(27, 27, 26, 0.05);
  --shadow-md: 0 2px 10px rgba(27, 27, 26, 0.08);
}

/* dark = neutral charcoal (mirrors personal theme) */
:root[data-theme="dark"] {
  --bg: #18191c;
  --bg-soft: #202126;
  --bg-sunken: #1d1e22;
  --bg-code: #202126;     /* =personal --shade */
  --bg-sidebar: #1b1c20;
  --surface: #1d1e22;

  --fg: #e6e6e4;
  --fg-soft: #c9c9c6;
  --fg-muted: #9a9a98;    /* =personal --ink-soft */
  --fg-faint: #6f6f6d;

  --border: #34353a;      /* =personal --rule */
  --border-strong: #44454b;

  --accent: #e6e6e4;
  --accent-soft: #2a2b30; /* active-nav wash, dark */
  --accent-fg: #e6e6e4;
  --link: #e6e6e4;

  --hl-keyword: #e6e6e4;
  --hl-string:  #c9c9c6;
  --hl-comment: #6f6f6d;
  --hl-number:  #c9c9c6;

  /* dark figure fills: deep neutral-leaning washes, hues still legible */
  --c-note-bg:      #14202e;
  --c-rationale-bg: #1c1730;
  --c-gotcha-bg:    #241d0e;
  --c-invariant-bg: #112216;
  --c-warning-bg:   #2a1414;
  --c-key-bg:       #0c2128;

  --shadow-md: 0 2px 14px rgba(0, 0, 0, 0.5);
}

/* (d) ---- Paper grain on the page background -------------------------------*/
:root {
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='251' height='257'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
body {
  background-color: var(--bg);
  background-image: var(--noise);
  background-size: 251px 257px;          /* native prime tile: never repeats visibly */
  font-feature-settings: "liga" 1, "onum" 1;  /* CM ligatures + oldstyle figures */
}
::selection { background: #d9e8ff; }
:root[data-theme="dark"] ::selection { background: #2b3a57; }

/* (e) ---- Typographic fidelity: scale, leading, measure --------------------*/
/* CM runs small & light at a given px; nudge the base up and open the leading
   so prose reads like the personal site (its body is ~1.28rem / 1.62). */
body { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; }

/* Headings stay Computer Modern (display); running prose is the readable serif. */
article h1, article h2, article h3, article h4 { font-family: "CMU Serif", Georgia, serif; }
article h1 { font-weight: 700; letter-spacing: -0.01em; font-size: 2.15rem; line-height: 1.16; }
article h2 { font-weight: 700; letter-spacing: 0;        font-size: 1.5rem;  }
article h3 { font-weight: 400; font-style: italic;       font-size: 1.2rem;  color: var(--fg); }
article h4 { font-weight: 700; font-style: normal;       font-size: 1.0rem;  color: var(--fg-soft); }
/* slightly looser prose rhythm */
article p { line-height: 1.66; }
.lead { font-style: italic; color: var(--fg-soft); border-left-color: var(--border-strong); }

/* Quiet, small-caps-style navigation & section eyebrows (book running heads).
   Replaces the shouty uppercase+letterspacing with CM small-caps. */
.nav-group > .nav-group-title,
.toc .toc-title,
.section-label,
.callout .callout-title,
.page-nav .dir,
.year-sep {
  text-transform: none;
  font-variant: small-caps;
  letter-spacing: 0.04em;
  font-weight: 700;
}
.nav-group a { font-size: 0.95rem; }            /* serif needs a touch more size */
.nav-group a .num { color: var(--fg-faint); font-weight: 400; }
.toc a { font-size: 0.9rem; }
.toc a.h3 { font-style: italic; }

/* Inline code: CM Typewriter on a faint mark, INK text (no accent colour). */
code {
  background: var(--bg-code);
  border-color: var(--border);
  color: var(--fg);
}
:root[data-theme="dark"] code { color: var(--fg); }   /* override the #a9c7ff blue */
dl.kv dt { color: var(--fg); }                          /* kv terms → ink, not accent */
.legend .mono, .logstrip .ls-head .ttl .q { color: var(--fg); } /* mono labels → ink */

/* Links: ink with a hairline underline that strengthens on hover (book style),
   instead of a coloured link with hover-underline. Chrome links stay quiet. */
a { text-decoration: underline; text-decoration-thickness: .055em;
    text-underline-offset: .12em; text-decoration-color: var(--border-strong); }
a:hover { text-decoration-color: var(--fg); }
.nav-group a, .toc a, .topbar .brand, .page-nav a, .breadcrumb a, .card,
.heading-anchor, a.cite { text-decoration: none; }
.nav-group a:hover, .toc a:hover, .page-nav a:hover { text-decoration: none; }

/* (e) ---- Targeted de-colouring of hard-coded chrome gradients -------------*/
/* brand logo: was blue→purple gradient with white glyph → ink chip on paper */
.topbar .brand .logo {
  background: var(--fg);
  color: var(--bg);
}
/* hero: drop the accent radial glow; keep the plate quiet */
.hero { background: none; }
/* hero H1: was accent gradient text-clip → solid ink, italic display (personal) */
.hero h1 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--fg);
  font-style: italic; font-weight: 700;
}
/* sidebar Part divider bar: was blue→purple → a short ink rule */
.nav-part::before { background: var(--fg); }

/* (e) ---- Calmer figure plate (still a plate, just quieter) ----------------*/
/* keep the dot-grid canvas, but align it to paper & soften the shadow so
   figures read as quiet inset plates rather than glossy cards. */
:root            { --canvas: #f1f1f0; --dot: #dcdcda; }
:root[data-theme="dark"] { --canvas: #1b1c20; --dot: #2c2d33; }
figure.diagram { box-shadow: none; border-color: var(--border); }

/* Topbar: plain hairline, no saturate (monochrome) ------------------------- */
.topbar { backdrop-filter: blur(8px); }
/* "back to homepage" link injected into the guide topbar by app.js */
.topbar .home-up { font-size: 0.82rem; color: var(--fg-muted); text-decoration: none;
  white-space: nowrap; padding-right: 0.7rem; border-right: 1px solid var(--border); }
.topbar .home-up:hover { color: var(--fg); text-decoration: none; }

/* Callouts → monochrome. Colour belongs to diagrams, not chrome; the icon and
   label (ℹ ✦ ⚠ ✓ ✕ ★ + title) carry the type, so no colour is needed. ------- */
.callout.note, .callout.rationale, .callout.gotcha,
.callout.invariant, .callout.warning, .callout.key {
  border-left-color: var(--border-strong); background: var(--bg-soft);
}
.callout.note::before, .callout.rationale::before, .callout.gotcha::before,
.callout.invariant::before, .callout.warning::before, .callout.key::before { color: var(--fg-muted); }
.callout.note .callout-title, .callout.rationale .callout-title, .callout.gotcha .callout-title,
.callout.invariant .callout-title, .callout.warning .callout-title, .callout.key .callout-title { color: var(--fg); }

/* Diagrams are figures: keep their original sans at the designed sizes, so the
   serif body cannot widen the fixed node boxes (which overflowed). The caption
   stays in the reading serif. ------------------------------------------------ */
figure.diagram { font-family: var(--font-sans); }
figure.diagram figcaption { font-family: var(--font-serif); }

/* KIP/JIRA badges: monochrome like the rest of the chrome (colour is for diagrams only). */
.pill.kip { color: var(--fg-soft); border-color: var(--border-strong); background: var(--bg-soft); }

/* end Computer Modern re-skin ============================================== */