/* ==========================================================
       Base / tokens
       ========================================================== */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    img, svg, video { max-inline-size: 100%; block-size: auto; }
    input, button, select, textarea { font: inherit; color: inherit; }

    :root {
      /* Colors */
      --bg: #18181b;
      --text: #eef3f8;
      --muted: #a1a1aa;
      --link: #fafafa;
      --link-hover: #ffffff;
      --border: #2a2a31;

      /* Surfaces */
      --surface: rgba(255,255,255,0.035);
      --surface-2: rgba(255,255,255,0.06);
      --border-subtle: rgba(255,255,255,0.10);

      /* Effects */
      --shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 10px 30px rgba(0,0,0,0.35);
      --radius-pill: 999px;

      /* Focus */
      --focus: currentColor;

      /* Typography */
      --font-body-atkinson: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      --font-body-lora: "Lora", Georgia, serif;
      --font-body: var(--font-body-atkinson);
      --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

      --base-size: 17px;
      --lh-body: 1.5;
      --lh-heading: 1.18;
      --scale: 1.2;
      --heading-weight: 400;
      --tracking-body: 0em;

      --weight-strong: 600; /* semibold everywhere */

      --p-space: 0.86em;

      /* Layout & spacing */
      --measure: 55ch;
      --gutter: 20px;

      /* Extra whitespace above main content (title/body). Sidebar remains flush. */
      --content-top: 12px;

      --heading-top: 1.45em;
      --heading-bottom: 0.65em;

      --list-indent: 1.40em;
      --list-item-space: 0.20em;

      /* Links */
      --underline-thickness: 2px;
      --underline-offset: 3px;

      /* Code */
      --code-size: 0.92em;
      --code-block-pad: 12px;
      --tab-size: 8;

      /* Tables */
      --table-cell-pad: 8px;

      /* Callouts & figures */
      --callout-pad: 13px;
      --figure-radius: 3px;

      /* Small tweaks */
      --caption-size: 0.92em;
      --inline-code-radius: 6px;

      /* Desktop left column */
      --cp-w-expanded: 272px;
      --cp-w-collapsed: 64px;
      --cp-w: var(--cp-w-expanded);
      --cp-gap: 34px;

      --cp-pad-left: 18px;
      --cp-pad-right: 14px;

      /* Logo sizing */
      --logo-big: 96px;
      --logo-small: 34px;

      /* Animation */
      --ease: 220ms ease;

      /* Tree rails (HIGH contrast) */
      --tree-rail: rgba(248,250,252,0.62);
      --tree-rail-sub: rgba(248,250,252,0.48);

      /* Tree density */
      --tree-item-pad: 2px;      /* tighter */
      --tree-font-sub: 0.88em;   /* slightly smaller for non-root */

      /* Mobile */
      --mobile-bar-h: 54px;
    }

    html[data-theme="light"] {
      --bg: #f7f7f5;
      --text: #0f172a;
      --muted: #475569;
      --link: #1f2937;
      --link-hover: #111827;
      --border: #e7e7e3;

      --surface: rgba(0,0,0,0.03);
      --surface-2: rgba(0,0,0,0.055);
      --border-subtle: rgba(0,0,0,0.10);

      --shadow: 0 1px 0 rgba(0,0,0,0.03) inset, 0 8px 24px rgba(0,0,0,0.08);
      --focus: currentColor;

      --tree-rail: rgba(15,23,42,0.42);
      --tree-rail-sub: rgba(15,23,42,0.32);
    }

    html[data-font="atkinson"] { --font-body: var(--font-body-atkinson); --base-size: 17.5px; --measure: 52ch; }
    html[data-font="lora"]     { --font-body: var(--font-body-lora); --base-size: 17px; --measure: 56ch; }

    html { color-scheme: dark; }
    html[data-theme="light"] { color-scheme: light; }

    @media (prefers-reduced-motion: reduce) {
      *:not(:focus) { animation: none !important; transition: none !important; }
    }

    /* ==========================================================
       Base layout
       ========================================================== */
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      font-size: var(--base-size);
      line-height: var(--lh-body);
      letter-spacing: var(--tracking-body);
      padding: var(--gutter);
      transition: background-color 220ms ease, color 220ms ease;
    }

    /* On mobile, allow top bar without covering initial content */
    html[data-layout="mobile"] body {
      padding-top: calc(var(--gutter) + var(--mobile-bar-h));
    }

    .container {
      max-inline-size: var(--measure);
      margin-inline: auto;
      padding-top: var(--content-top);
    }

    /* Docked mode: stop centering to avoid overlapping the left column */
    html[data-layout="docked"] .container {
      margin-inline: 0;
      margin-left: calc(var(--cp-w) + var(--cp-gap) - var(--gutter));
      margin-right: auto;
    }

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

    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 2px solid var(--focus);
      outline-offset: 3px;
      border-radius: 6px;
    }

    ::selection { background: rgba(248,250,252,0.18); }
    html[data-theme="light"] ::selection { background: rgba(15,23,42,0.14); }

    /* Skip link */
    .skip-link {
      position: absolute;
      inset-inline-start: -9999px;
      inset-block-start: auto;
      padding: 8px 12px;
      background: var(--bg);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
      z-index: 2000;
    }
    .skip-link:focus {
      position: fixed;
      inset-inline-start: 16px;
      inset-block-start: 16px;
    }

    /* ==========================================================
       Icon buttons (desktop + mobile)
       ========================================================== */
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text);
      cursor: pointer;
      transition: transform 120ms ease, border-color 180ms ease, background-color 180ms ease;
      -webkit-tap-highlight-color: transparent;
    }
    .icon-btn:hover { transform: translateY(-1px); }
    .icon-btn:active { transform: translateY(0); }

    /* Default icon look: stroke icons */
    .icon-btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      overflow: visible;
      display: block;
    }

    /* Font icons need fill (to avoid “empty box”) */
    .font-btn svg { fill: currentColor; stroke: currentColor; }

    /* Theme icon switching based on theme preference (system/light/dark) */
    .theme-btn .icon { display: none; }
    html[data-theme-pref="system"] .theme-btn .icon.system { display: inline-flex; }
    html[data-theme-pref="light"]  .theme-btn .icon.sun    { display: inline-flex; }
    html[data-theme-pref="dark"]   .theme-btn .icon.moon   { display: inline-flex; }

    /* Font icon switching */
    .font-btn .icon { display: none; }
    html[data-font="atkinson"] .font-btn .icon.sans  { display: inline-flex; }
    html[data-font="lora"]     .font-btn .icon.serif { display: inline-flex; }

    /* Collapse icon switching */
    html[data-cp="collapsed"] .cp-collapse-btn .icon.expand { display: inline-flex; }
    html[data-cp="collapsed"] .cp-collapse-btn .icon.collapse { display: none; }
    html:not([data-cp="collapsed"]) .cp-collapse-btn .icon.expand { display: none; }
    html:not([data-cp="collapsed"]) .cp-collapse-btn .icon.collapse { display: inline-flex; }

    /* ==========================================================
       Desktop control panel (flush left; collapsible)
       ========================================================== */
    .control-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: var(--cp-w);
      z-index: 1200;
      padding: var(--gutter) var(--cp-pad-right) var(--gutter) var(--cp-pad-left);
      overflow: hidden; /* internal sections handle scrolling */
      background: transparent;
      transition: width var(--ease);
    }

    html[data-cp="collapsed"] {
      --cp-w: var(--cp-w-collapsed);
      --cp-pad-left: 12px;
      --cp-pad-right: 12px;
    }
    html:not([data-cp="collapsed"]) {
      --cp-w: var(--cp-w-expanded);
    }

    .cp-inner {
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 14px;
      min-height: 0;
    }

    /* Header layout: logo row */
    .cp-header {
      display: grid;
      grid-template-rows: auto;
      gap: 10px;
      min-width: 0;
    }

    .cp-toprow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    .cp-logo-btn {
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      color: var(--text);
      line-height: 0;
      flex: 0 0 auto;
      text-decoration: none;
    }

    .cp-logo {
      width: var(--logo-big);
      height: var(--logo-big);
      display: block;
    }

    .cp-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
    }

    /* Collapsed control panel: small logo + buttons vertical; hide sections */
    html[data-cp="collapsed"] .cp-header {
      grid-template-rows: auto;
      gap: 12px;
      justify-items: center;
      align-content: start;
    }
    html[data-cp="collapsed"] .cp-toprow {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
    }
    html[data-cp="collapsed"] .cp-logo {
      width: var(--logo-small);
      height: var(--logo-small);
    }
    html[data-cp="collapsed"] .cp-actions {
      flex-direction: column;
      gap: 12px;
    }
    html[data-cp="collapsed"] .cp-sections { display: none; }
    html[data-cp="collapsed"] .cp-inner { grid-template-rows: auto; }

    /* ==========================================================
       Control panel sections: nav + toc each own a fixed region
       ToC follows the fully-expanded nav when nav is short,
       but the nav row is capped so ToC never drops below baseline.
       ========================================================== */
    .cp-sections {
      display: grid;
      grid-template-rows: minmax(0, var(--cp-nav-row, 0.6fr)) 1.4fr; /* ToC follows SiteNav, capped */
      gap: 14px;
      min-height: 0;
    }

    .cp-block {
      min-height: 0;
      display: grid;
      grid-template-rows: auto 1fr; /* head (static) + body (animated/scrollable) */
      gap: 8px;
      overflow: hidden;
    }

    /* Static root line (does NOT animate => prevents jitter) */
    .tree-root {
      display: block;
      font-weight: var(--weight-strong);
      letter-spacing: 0.01em;
      margin: 0;
      padding: 0;
      color: var(--text);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      overflow-wrap: anywhere;
      word-break: break-word;
      width: fit-content;
      max-width: 100%;
    }
    .tree-root.is-link:hover { border-bottom-color: var(--border-subtle); }

    /* Body wrapper holds a single scrollable tree that fades in/out */
    .cp-block-body {
      position: relative;
      min-height: 0;
      overflow: hidden;
    }

    .tree-body {
      position: absolute;
      inset: 0;
      overflow: auto;
      padding-right: 6px;
      scrollbar-gutter: stable both-edges;

      /* hidden by default (collapsed) */
      opacity: 0;
      pointer-events: none;

      transition: opacity var(--ease);
      will-change: opacity;
      min-width: 0;
    }

    /* Expanded at top-of-page or on hover (per-block) */
    html[data-near-top="true"] #cp-nav-block .tree-body,
    html[data-nav-hover="true"] #cp-nav-block .tree-body {
      opacity: 1;
      pointer-events: auto;
    }

    html[data-near-top="true"] #cp-toc-block .tree-body,
    html[data-toc-hover="true"] #cp-toc-block .tree-body {
      opacity: 1;
      pointer-events: auto;
    }

    /* Desktop-only ToC */
    html[data-layout="mobile"] #cp-toc-block { display: none; }
    html[data-layout="mobile"] .control-panel { display: none; }

    /* ==========================================================
   Tree (high contrast, wrap-friendly, tighter) — FIXED RAILS
   (includes: no inherited underlines + controlled tree text size)
   ========================================================== */

/* Non-root levels (everything inside the scrollable tree bodies) */
.tree-body {
  font-size: var(--tree-font-sub); /* e.g. 0.88em */
  line-height: 1.32;
}

/* Tree links should NOT inherit the global underline */
.tree-root,
.tree-link {
  text-decoration: none !important;
}

/* Optional: keep your subtle hover affordance via border-bottom */
.tree-root { border-bottom: 1px solid transparent; }
.tree-root.is-link:hover { border-bottom-color: var(--border-subtle); }

.tree-link {
  border-bottom: 1px solid transparent;
}
.tree-link:hover {
  border-bottom-color: var(--border-subtle);
}

/* Stop using a full-height UL border as the rail */
.tree-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px;
  border-left: none;
}

.tree-node {
  position: relative;
  margin: 0;
  padding: var(--tree-item-pad) 0;
  min-inline-size: 0;
}

/* Vertical segment (per item) */
.tree-node::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--tree-rail);
}

/* Elbow connector (horizontal) */
.tree-node::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 0.75em;
  width: 10px;
  height: 1px;
  background: var(--tree-rail);
}

/* Last item: stop the vertical segment at the elbow (no tail below) */
.tree-node:last-child::before {
  bottom: auto;
  height: 0.75em;
}

/* Sub-level coloring */
.tree-node > .tree-list .tree-node::before,
.tree-node > .tree-list .tree-node::after {
  background: var(--tree-rail-sub);
}

/* Active chain (ToC) + current page (SiteNav) */
.tree-link.is-active,
.tree-link.is-active-parent,
.tree-link[aria-current="page"] {
  font-weight: var(--weight-strong);
  color: var(--text);
  border-bottom-color: var(--border);
}




    /* ==========================================================
       Mobile top bar + menu
       ========================================================== */
    .mobile-bar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: var(--mobile-bar-h);
      display: none; /* desktop hidden */
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      z-index: 1500;
      background: color-mix(in srgb, var(--bg) 92%, transparent);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      transform: translateY(0);
      transition: transform 180ms ease;
    }
    @supports not (background: color-mix(in srgb, white, black)) {
      .mobile-bar { background: var(--bg); }
    }

    html[data-layout="mobile"] .mobile-bar { display: flex; }

    html[data-mobilebar="hidden"] .mobile-bar {
      transform: translateY(-110%);
    }

    .mobile-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      color: var(--text);
      line-height: 0;
      text-decoration: none;
    }
    .mobile-logo img {
      width: 28px;
      height: 28px;
      display: block;
    }

    .mobile-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .menu-btn svg { width: 20px; height: 20px; }

    /* Mobile menu overlay */
    .mobile-menu { display: none; }
    html[data-layout="mobile"] .mobile-menu { display: block; }

    .mobile-menu[aria-hidden="true"] .mobile-menu-backdrop {
      opacity: 0;
      pointer-events: none;
    }
    .mobile-menu[aria-hidden="true"] .mobile-menu-panel {
      transform: translateX(-102%);
      pointer-events: none;
    }

    .mobile-menu-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      opacity: 1;
      transition: opacity var(--ease);
      z-index: 1490;
    }

    .mobile-menu-panel {
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: min(88vw, 360px);
      background: var(--bg);
      border-right: 1px solid var(--border);
      z-index: 1510;
      padding: 16px 14px;
      transform: translateX(0);
      transition: transform var(--ease);
      overflow: auto;
    }

    .mobile-menu-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }

    .mobile-menu-brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      font-weight: var(--weight-strong);
      text-decoration: none;
      color: var(--text);
    }
    .mobile-menu-brand img {
      width: 28px;
      height: 28px;
      display: block;
    }

    html[data-mobilemenu="open"] body {
      overflow: hidden;
    }

    /* ==========================================================
       Prose (kept; semibold swaps applied)
       ========================================================== */
    .prose { overflow-wrap: anywhere; word-break: break-word; }

    .prose :is(p, li, blockquote) {
      hyphens: none;
      text-align: left;
    }

    .prose {
      --h1: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
      --h2: calc(var(--base-size) * var(--scale) * var(--scale));
      --h3: calc(var(--base-size) * var(--scale));
      --h4: calc(var(--base-size) * 1.0);
      --h5: calc(var(--base-size) * 0.92);
      --h6: calc(var(--base-size) * 0.86);
    }

    .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
      font-family: var(--font-body);
      font-weight: var(--heading-weight);
      line-height: var(--lh-heading);
      letter-spacing: -0.01em;
      text-align: left;
      margin: 0;
    }

    .prose h1 { font-size: var(--h1); margin: 0 0 0.55em; }
    .prose h2 { font-size: var(--h2); margin: var(--heading-top) 0 var(--heading-bottom); }
    .prose h3 { font-size: var(--h3); margin: var(--heading-top) 0 var(--heading-bottom); }
    .prose h4 { font-size: var(--h4); margin: calc(var(--heading-top) * 0.85) 0 var(--heading-bottom); }
    .prose h5 { font-size: var(--h5); margin: calc(var(--heading-top) * 0.75) 0 var(--heading-bottom); }
    .prose h6 { font-size: var(--h6); margin: calc(var(--heading-top) * 0.65) 0 var(--heading-bottom); color: var(--muted); }

    .post-meta {
      color: var(--muted);
      font-size: 0.95em;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-block: 0.35em 0;
    }

    .prose p { margin: var(--p-space) 0; }

    .prose :is(ul, ol) {
      margin: var(--p-space) 0;
      padding-inline-start: var(--list-indent);
    }
    .prose li + li { margin-top: var(--list-item-space); }
    .prose li :is(ul, ol) { margin-top: 0.5em; }

    .prose blockquote {
      margin: 1.1em 0;
      padding: 0.1em 0 0.1em 1em;
      border-left: 3px solid var(--border);
      color: color-mix(in srgb, var(--text) 86%, var(--muted));
    }
    @supports not (color: color-mix(in srgb, white, black)) {
      .prose blockquote { color: var(--text); }
    }

    .prose hr {
      border: none;
      border-top: 1px solid var(--border);
      margin: 1.6em 0;
    }

    .prose code {
      font-family: var(--font-mono);
      font-size: var(--code-size);
    }
    .prose :not(pre) > code {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--inline-code-radius);
      padding: 0.12em 0.28em;
    }

    .prose pre {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: var(--code-block-pad);
      overflow-x: auto;
      margin: 1.1em 0;
      box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
    }
    .prose pre code {
      display: block;
      tab-size: var(--tab-size);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
      margin: 1.1em 0;
    }
    .prose table {
      width: 100%;
      border-collapse: collapse;
      min-width: 560px;
    }
    .prose th, .prose td {
      padding: var(--table-cell-pad);
      text-align: left;
      vertical-align: top;
    }
    .prose th {
      color: var(--text);
      border-bottom: 1px solid var(--border);
      font-weight: var(--weight-strong);
    }
    html[data-table-borders="rows"] .prose td {
      border-bottom: 1px solid var(--border-subtle);
    }
    html[data-table-borders="grid"] .prose th,
    html[data-table-borders="grid"] .prose td {
      border: 1px solid var(--border-subtle);
    }
    html[data-table-zebra="on"] .prose tbody tr:nth-child(even) td {
      background: var(--surface-2);
    }

    .prose figure { margin: 1.2em 0; }
    .prose .hero { margin-top: 1.1em; margin-bottom: 1.2em; }
    .prose .hero-graphic {
      display: block;
      width: 100%;
      border-radius: var(--figure-radius);
      border: 1px solid var(--border);
      background: var(--surface);
    }
    .prose figcaption {
      margin-top: 0.55em;
      color: var(--muted);
      font-size: var(--caption-size);
      line-height: 1.45;
    }

    .callout {
      margin: 1.2em 0;
      padding: var(--callout-pad);
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
    }
    .callout-title {
      font-weight: var(--weight-strong);
      margin: 0 0 0.4em;
      letter-spacing: 0.01em;
    }
    .callout p { margin: 0.55em 0; }
    .callout :first-child { margin-top: 0; }
    .callout :last-child { margin-bottom: 0; }

    html[data-callout-style="bar"] .callout { border-left-width: 4px; }
    .callout-note { border-left-color: var(--link); }
    .callout-warn { border-left-color: var(--muted); }
    .callout-tip  { border-left-color: var(--text); }

    .prose details {
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 0.7em 0.9em;
      background: var(--surface);
      margin: 1.1em 0;
    }
    .prose summary { cursor: pointer; font-weight: var(--weight-strong); }
    .prose details[open] summary { margin-bottom: 0.6em; }

    .prose kbd {
      font-family: var(--font-mono);
      font-size: 0.92em;
      padding: 0.10em 0.35em;
      border: 1px solid var(--border);
      border-bottom-width: 2px;
      border-radius: 8px;
      background: var(--surface);
    }

    .prose sup a {
      text-decoration: none;
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 1px;
    }
    .footnotes {
      margin-top: 2.2em;
      padding-top: 1.2em;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.95em;
    }
    .footnotes ol { padding-left: 1.4em; }
    .footnotes li { margin: 0.7em 0; }
    .footnotes a { color: inherit; }
    .footnotes a:hover { color: var(--text); }
    .footnote-backref { margin-left: 0.35em; }

    /* Muted metadata snippet used in list views (homepage/page listings) */
    .meta {
      color: var(--muted);
      font-size: 0.95em;
    }

    /* --- Force correct first paint on small screens (prevents sidebar flash) --- */
    @media (max-width: 940px) {
      .control-panel { display: none !important; }
      .mobile-bar { display: flex !important; }
      .mobile-menu { display: block !important; }

      body {
        padding-top: calc(var(--gutter) + var(--mobile-bar-h)) !important;
      }
    }

    @media print {
      /* Paper margins (hint; users can still override in the print dialog) */
      @page { margin: 0.85in; }

      /* Print only the main content */
      .control-panel,
      .mobile-bar,
      .mobile-menu {
        display: none !important;
      }

      /* Clean base for paper */
      body {
        padding: 0 !important;
        background: #fff !important;
        color: #000 !important;
      }

      .container {
        margin: 0 auto !important;
        max-width: 100% !important;
        padding-top: 0 !important;
      }

      /* Typography tweaks for print */
      body { font-size: 12pt; line-height: 1.45; }
      .prose h1, .prose h2, .prose h3 { break-after: avoid-page; }
      .prose p, .prose blockquote { orphans: 3; widows: 3; }

      /* Avoid splitting key blocks across pages (treated as hints by browsers) */
      .prose :is(blockquote, pre, figure, table, .callout, .table-wrap) {
        break-inside: avoid;
      }

      /* Links: no underlines, no URL expansion */
      a {
        text-decoration: none !important;
        color: inherit !important;
      }

      /* Remove visual effects that rarely print well */
      * { box-shadow: none !important; }

      /* Tables: avoid clipping from the screen wrapper */
      .table-wrap { overflow: visible !important; }
    }

    /* ==========================================================
       Pelican integrations (non-destructive)
       ========================================================== */

    /* Pygments wrapper: avoid double margins/padding when Pelican wraps code blocks */
    .prose .highlight { margin: 1.1em 0; }
    .prose .highlight pre { margin: 0; }

    /* If Pelican emits a <table class="highlighttable"> for line numbers */
    .prose table.highlighttable { width: 100%; border-collapse: collapse; }
    .prose table.highlighttable td { padding: 0; border: none; }
    .prose table.highlighttable td.linenos {
      width: 3.2em;
      user-select: none;
      opacity: 0.75;
    }
    .prose table.highlighttable td.linenos pre {
      border-right: 1px solid var(--border);
      border-radius: 0;
    }
    .prose table.highlighttable td.code pre {
      border-radius: 0;
    }

    /* No-sidebar shell */
    html[data-sidebar="off"] .container {
      margin-inline: auto !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-top: 0 !important;
    }
    html[data-sidebar="off"] body {
      padding-top: var(--gutter) !important;
    }

    /* Ensure no phantom mobile-bar padding when sidebar UI is off */
    @media (max-width: 940px) {
      html[data-sidebar="off"] body {
        padding-top: var(--gutter) !important;
      }
    }

    /* ==========================================================
       Theme additions: ToC toggle + logo swap + Markdown compat
       ========================================================== */

    /* Hide ToC entirely when templates set data-toc="off" (homepage) */
    html[data-toc="off"] #cp-toc-block { display: none !important; }
    html[data-toc="off"] .cp-sections { grid-template-rows: 1fr !important; }

    /* Logo swap: provide separate light/dark SVGs without embedding in CSS */
    img.logo-light, img.logo-dark { display: none; }
    html[data-theme="light"] img.logo-light { display: block; }
    html[data-theme="dark"]  img.logo-dark  { display: block; }

    /* ----------------------------------------------------------
       Markdown admonitions + footnotes compatibility
       - Python-Markdown admonition: .admonition, .admonition-title
       - Python-Markdown footnotes: .footnote
       These are styled to match the existing .callout and .footnotes
       ---------------------------------------------------------- */

    /* Admonitions -> callout look */
    .admonition {
      margin: 1.2em 0;
      padding: var(--callout-pad);
      border: 1px solid var(--border);
      border-radius: 14px;
      background: var(--surface);
    }
    html[data-callout-style="bar"] .admonition { border-left-width: 4px; }

    .admonition-title {
      font-weight: var(--weight-strong);
      margin: 0 0 0.4em;
      letter-spacing: 0.01em;
    }
    .admonition p { margin: 0.55em 0; }
    .admonition :first-child { margin-top: 0; }
    .admonition :last-child  { margin-bottom: 0; }

    /* Type mapping (note/warning/tip) */
    .admonition.note, .admonition.info, .admonition.hint { border-left-color: var(--link); }
    .admonition.warning, .admonition.caution, .admonition.danger, .admonition.error { border-left-color: var(--muted); }
    .admonition.tip, .admonition.success { border-left-color: var(--text); }

    /* Footnotes container class differs between authoring styles */
    .footnote {
      margin-top: 2.2em;
      padding-top: 1.2em;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 0.95em;
    }
    .footnote ol { padding-left: 1.4em; }
    .footnote li { margin: 0.7em 0; }
    .footnote a { color: inherit; }
    .footnote a:hover { color: var(--text); }