/* Self-contained book stylesheet, tuned to the latentSource blog tokens.
   No external fonts/CDN so the book works offline and under /course/. */

:root {
  /* Top-bar height — the sticky sidebar offsets derive from it, so a host
     site whose replica header is taller only overrides this one token. */
  --topbar-h: 56px;
  --bg: #ffffff;
  --fg: #1c1c1e;
  --accent: #06b6d4;
  --muted: #6b7280;
  --surface: #f4f4f5;
  --border: #e4e4e7;
  /* Callout accents (readability toolkit). --*-bg is a tint of the accent. */
  --note: #0284c7;    --note-bg: #f0f9ff;
  --tip: #16a34a;     --tip-bg: #f0fdf4;
  --warn: #d97706;    --warn-bg: #fffbeb;
  --keyidea: #7c3aed; --keyidea-bg: #f5f3ff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1117;
    --fg: #e6edf3;
    --muted: #8b949e;
    --surface: #161b22;
    --border: #30363d;
    --note: #38bdf8;    --note-bg: #0c2231;
    --tip: #4ade80;     --tip-bg: #0d241a;
    --warn: #fbbf24;    --warn-bg: #2a2011;
    --keyidea: #a78bfa; --keyidea-bg: #1e1830;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
}

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 19rem;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  padding: 1.5rem 1.25rem;
  position: sticky;
  /* Sits below the sticky top bar; the sidebar scrolls inside the
     remaining viewport when the chapter list is long. */
  top: var(--topbar-h);
  align-self: flex-start;
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.brand {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  margin-bottom: 1.25rem;
}
.brand:hover { opacity: 0.8; }

.toc-group { margin-bottom: 1rem; }
.toc-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0.1rem 0; font-size: 0.9rem; }
.toc a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 0.375rem;
  color: var(--muted);
  text-decoration: none;
}
.toc a:hover { color: var(--fg); background: var(--surface); }
.toc li.planned { padding: 0.3rem 0.5rem; color: var(--muted); opacity: 0.6; }

/* "Showcases in this chapter" block rendered under the TOC on showcase
   landing pages. Same look as the .toc-group above so the sidebar reads
   as one continuous list. */
.sidebar-showcases {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.sidebar-section-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.sidebar-showcases ol { list-style: none; margin: 0; padding: 0; }
.sidebar-showcases li { margin: 0.1rem 0; font-size: 0.9rem; }
.sidebar-showcases a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-radius: 0.35rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.3;
}
.sidebar-showcases a:hover { color: var(--fg); background: var(--surface); }
.sidebar-showcases li.active a {
  color: var(--fg);
  background: var(--surface);
  font-weight: 600;
  border-left: 2px solid var(--accent);
  padding-left: calc(0.5rem - 2px);
}
.toc-num {
  display: inline-block;
  min-width: 1.4rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.content {
  flex: 1;
  /* Wide container so the chapter article + 18rem aside breathe; the
     reading column itself is constrained by .chapter-grid below. */
  max-width: 80rem;
  padding: 2.5rem 2.5rem 4rem;
  margin: 0 auto;
}

.content h1 { font-size: 2rem; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.content h2 { font-size: 1.4rem; margin: 2.25rem 0 0.75rem; letter-spacing: -0.01em; }
.content h3 { font-size: 1.1rem; margin: 1.75rem 0 0.5rem; }
.content a { color: var(--accent); text-decoration: none; }
.content a:hover { text-decoration: underline; }
.lede { color: var(--muted); font-size: 1.05rem; }

.content pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.5;
}
.content :not(pre) > code {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
}
.content pre code { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }

/* Shiki dual-theme: swap to the dark palette under dark mode. */
@media (prefers-color-scheme: dark) {
  .shiki, .shiki span {
    color: var(--shiki-dark) !important;
    background-color: transparent !important;
  }
}

.content table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.content th, .content td { border: 1px solid var(--border); padding: 0.45rem 0.7rem; text-align: left; }
.content blockquote {
  margin: 1rem 0;
  padding: 0.25rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

/* ── Chapter readability: prose rhythm, section dividers, callouts, cards ── */
.content { font-size: 1.02rem; }
.chapter-article p { margin: 0 0 1.15rem; }
.chapter-article ul, .chapter-article ol { margin: 0 0 1.15rem; padding-left: 1.4rem; }
.chapter-article li { margin: 0.35rem 0; }
.chapter-article li > ul, .chapter-article li > ol { margin: 0.35rem 0; }

/* Number the sections and rule between them, so the 12–13 sections read as
   distinct stations instead of one wall. Scoped to chapter articles. */
.chapter-article { counter-reset: section; }
.chapter-article h2 {
  counter-increment: section;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 1.9rem;
  margin-top: 2.75rem;
}
.chapter-article h2::before {
  content: counter(section);
  flex: none;
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
}

/* Callout boxes — pull key ideas / pitfalls / rules out of the prose. */
.callout {
  margin: 1.5rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: 0.5rem;
  background: var(--surface);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.callout-note { border-left-color: var(--note); background: var(--note-bg); }
.callout-note .callout-label { color: var(--note); }
.callout-tip { border-left-color: var(--tip); background: var(--tip-bg); }
.callout-tip .callout-label { color: var(--tip); }
.callout-warning { border-left-color: var(--warn); background: var(--warn-bg); }
.callout-warning .callout-label { color: var(--warn); }
.callout-keyidea { border-left-color: var(--keyidea); background: var(--keyidea-bg); }
.callout-keyidea .callout-label { color: var(--keyidea); }

/* "At a glance" card — the chapter skeleton up front. */
.at-a-glance {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface);
}
.at-a-glance > .callout-label { color: var(--accent); margin-bottom: 0.6rem; }
.at-a-glance > :last-child { margin-bottom: 0; }
.at-a-glance p { margin: 0.35rem 0; }
.at-a-glance table { margin: 0.6rem 0; font-size: 0.85rem; }
.at-a-glance th, .at-a-glance td { padding: 0.3rem 0.6rem; }

/* Collapsible deep-dive — optional depth folded away by default. Styled as an
   obvious clickable bar (a "Deep dive" pill + a caret that rotates on open). */
details.deepdive {
  margin: 1.5rem 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0.5rem;
  background: var(--surface);
  overflow: hidden;
}
details.deepdive > summary {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.1rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--fg);
  list-style: none;
}
details.deepdive > summary:hover { background: var(--bg); }
details.deepdive > summary::-webkit-details-marker { display: none; }
details.deepdive > summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--accent);
  transition: transform 0.15s ease;
}
details.deepdive[open] > summary { border-bottom: 1px solid var(--border); }
details.deepdive[open] > summary::after { transform: rotate(90deg); }
.dd-tag {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  background: var(--accent);
  padding: 0.14rem 0.45rem;
  border-radius: 0.3rem;
}
details.deepdive > *:not(summary) { margin-left: 1.1rem; margin-right: 1.1rem; }
details.deepdive > summary + * { margin-top: 0.85rem; }
details.deepdive > :last-child { margin-bottom: 0.85rem; }

/* Tabbed code view (```codetabs```): from-scratch vs library in one widget.
   CSS-only — the nth checked radio shows the nth panel (supports up to 4 tabs). */
.code-tabs {
  margin: 1.75rem 0;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  overflow: hidden;
}
.code-tabs > .ct-radio { position: absolute; opacity: 0; pointer-events: none; }
.code-tabs > .ct-buttons {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.code-tabs > .ct-buttons > .ct-button {
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}
.code-tabs > .ct-buttons > .ct-button:hover { color: var(--fg); }
.code-tabs > .ct-panels > .ct-panel { display: none; }
.code-tabs > .ct-panels > .ct-panel > pre { margin: 0; border: 0; border-radius: 0; }
.code-tabs > .ct-radio:nth-of-type(1):checked ~ .ct-panels > .ct-panel:nth-of-type(1),
.code-tabs > .ct-radio:nth-of-type(2):checked ~ .ct-panels > .ct-panel:nth-of-type(2),
.code-tabs > .ct-radio:nth-of-type(3):checked ~ .ct-panels > .ct-panel:nth-of-type(3),
.code-tabs > .ct-radio:nth-of-type(4):checked ~ .ct-panels > .ct-panel:nth-of-type(4) { display: block; }
.code-tabs > .ct-radio:nth-of-type(1):checked ~ .ct-buttons > .ct-button:nth-of-type(1),
.code-tabs > .ct-radio:nth-of-type(2):checked ~ .ct-buttons > .ct-button:nth-of-type(2),
.code-tabs > .ct-radio:nth-of-type(3):checked ~ .ct-buttons > .ct-button:nth-of-type(3),
.code-tabs > .ct-radio:nth-of-type(4):checked ~ .ct-buttons > .ct-button:nth-of-type(4) {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.code-tabs > .ct-radio:focus-visible ~ .ct-buttons > .ct-button { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Back-to-top button (created by the chapter scroll-spy script). */
.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--fg);
  font-size: 1.1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}
.to-top.show { opacity: 0.92; pointer-events: auto; }
.to-top:hover { border-color: var(--accent); color: var(--accent); }

.slides-link {
  margin: 0 0 1.5rem;
  font-size: 0.9rem;
}
.slides-link a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  color: var(--accent);
  text-decoration: none;
}
.slides-link a:hover { background: var(--surface); }

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.chapter-nav a { color: var(--accent); text-decoration: none; }
.chapter-nav a:hover { text-decoration: underline; }
.chapter-nav .up { color: var(--muted); }

@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--border); }
  .content { padding: 1.5rem 1.25rem 3rem; }
}

/* ── latentSource top bar ───────────────────────────────────────────────
   Same chrome the rest of latent uses: sticky, frosted, brand + divider +
   section label on the left; "back to blog" link on the right. Keeps the
   book inside the latentSource brand so a reader never feels marooned. */
.lt-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--topbar-h);
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem;
}
.lt-logo {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: none;
  font-size: 1rem;
}
.lt-logo:hover { opacity: 0.85; }
.lt-logo-accent { color: var(--accent); }
.lt-divider {
  color: var(--border);
  user-select: none;
}
.lt-section {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.lt-section:hover { color: var(--fg); }
.lt-spacer { flex: 1 1 auto; }
.lt-back {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8125rem;
}
.lt-back:hover { color: var(--fg); }

/* Replica site navigation (NAV_LINKS mode): the host site's main links +
   language toggle inside the top bar. Scrolls horizontally when narrow so
   mobile keeps every destination reachable. */
.lt-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.lt-nav::-webkit-scrollbar { display: none; }
.lt-nav-link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}
.lt-nav-link:hover { color: var(--fg); }
.lt-lang {
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.lt-lang:hover { border-color: var(--accent); }
.lt-logo-img { height: 1.25rem; width: auto; vertical-align: -0.25rem; margin-right: 0.35rem; }

@media (max-width: 820px) {
  .sidebar { top: var(--topbar-h); height: auto; }
  .lt-section { display: none; }
  .lt-divider { display: none; }
  .lt-sitenav .lt-nav { gap: 0.9rem; font-size: 0.8125rem; }
}

/* ── Chapter layout: article + right-side showcase aside ───────────────── */
/* Used on both chapter pages (article + aside) and showcase landings
   (article only — second column empty). Same template both times so the
   reading column has identical width across the two surfaces. */
.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: 2.5rem;
  align-items: start;
}
.chapter-grid .chapter-article { min-width: 0; }
/* When only the article is present (showcase landing), keep the second
   column reserved so widths stay aligned with the chapter page. */
.chapter-grid > .chapter-article:only-child { grid-column: 1 / 2; }

.chapter-showcases-aside {
  position: sticky;
  /* 56px topbar + 1.5rem of breathing room. */
  top: calc(56px + 1.5rem);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: calc(100vh - 56px - 3rem);
  overflow-y: auto;
}
.chapter-showcases-aside .aside-heading {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.chapter-showcases-aside .aside-lede {
  margin: 0 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
  line-height: 1.45;
}
.showcase-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* Slides link sits at the bottom of the aside as a secondary action. */
.aside-slides {
  margin-top: 0.25rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.aside-slides .slides-link {
  display: inline-block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.aside-slides .slides-link:hover { text-decoration: underline; }
.showcase-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.showcase-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.showcase-card .card-eyebrow {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.showcase-card .card-title { margin: 0; font-size: 0.95rem; font-weight: 700; }
.showcase-card .card-lede { margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.showcase-card .card-cta {
  margin-top: 0.2rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8rem;
}
.showcase-card.active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.showcase-card.active .card-cta {
  color: var(--muted);
  font-style: italic;
}

/* Stack the aside under the article on narrow viewports. The TOC sidebar
   already collapses at 820px (see earlier rule); the chapter aside follows
   the same breakpoint for consistency. */
@media (max-width: 1024px) {
  .chapter-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .chapter-showcases-aside {
    position: static;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
  }
}

/* ── Showcase landing page ──────────────────────────────────────────────── */
.back-to-chapter {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 1rem;
}
.back-to-chapter:hover { color: var(--fg); }

.lede {
  font-size: 1.05rem;
  color: var(--muted);
  margin: 0 0 1.5rem;
}

/* ── Showcase tab UI (CSS-only, no JS for switching) ──────────────────── */
.showcase-tabs { margin: 1.5rem 0; }
.showcase-tabs .tab-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tab-buttons {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.tab-button {
  padding: 0.55rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}
.tab-button:hover { color: var(--fg); }

/* Show only the panel matching the currently checked radio. The selectors
   walk: radio -> sibling .tab-panels -> matching .tab-panel by data-tab.
   And: radio -> sibling .tab-buttons -> matching .tab-button by [for]. */
.tab-panel { display: none; }
.showcase-tabs > .tab-radio[data-tab="readme"]:checked ~ .tab-panels > .tab-panel[data-tab="readme"],
.showcase-tabs > .tab-radio[data-tab="try"]:checked    ~ .tab-panels > .tab-panel[data-tab="try"],
.showcase-tabs > .tab-radio[data-tab="source"]:checked ~ .tab-panels > .tab-panel[data-tab="source"] {
  display: block;
}
.showcase-tabs > .tab-radio[data-tab="readme"]:checked ~ .tab-buttons > .tab-button[for$="-readme"],
.showcase-tabs > .tab-radio[data-tab="try"]:checked    ~ .tab-buttons > .tab-button[for$="-try"],
.showcase-tabs > .tab-radio[data-tab="source"]:checked ~ .tab-buttons > .tab-button[for$="-source"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.tab-radio:focus-visible + .tab-buttons .tab-button {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.showcase-tryit { margin: 0; }
.showcase-tryit .muted { color: var(--muted); font-size: 0.9em; margin-bottom: 1rem; }
.tryit-grid { display: grid; gap: 0.6rem; }
.tryit-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}
.tryit-input {
  width: 100%;
  padding: 0.75rem 0.85rem;
  font: inherit;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  resize: vertical;
  min-height: 7rem;
}
.tryit-input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tryit-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.tryit-provider { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.tryit-provider select {
  padding: 0.35rem 0.5rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  font: inherit;
}
.tryit-run {
  margin-left: auto;
  padding: 0.55rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
}
.tryit-run:hover { opacity: 0.9; }
.tryit-run:disabled { opacity: 0.5; cursor: progress; }
.tryit-output {
  margin: 0;
  padding: 0.9rem 1rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  white-space: pre-wrap;
  min-height: 5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
}
.tryit-output[data-state="loading"] { color: var(--muted); font-style: italic; }
.tryit-output[data-state="error"] { color: #e11d48; }
.tryit-output[data-state="ok"] { color: var(--fg); }
.tryit-output a { color: var(--accent); }

.showcase-code { margin: 2rem 0; }
.showcase-code h3 { font-size: 0.95rem; margin-top: 1.25rem; }
.showcase-code h3 code { background: transparent; padding: 0; }

.showcase-download { margin: 2rem 0; }
.showcase-download .cta { margin: 0.8rem 0; }
.showcase-download .btn.primary {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}
.showcase-download .btn.primary:hover { opacity: 0.9; }
.run-steps {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.55;
}

.showcase-files-section { margin: 2rem 0; }
.showcase-files {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.25rem 1.25rem;
  font-size: 0.85rem;
}
.showcase-files li code {
  background: transparent;
  padding: 0;
  color: var(--muted);
}

.showcase-readme { margin: 2rem 0; }

/* ── Chapter title header ───────────────────────────────────────────────
   Every chapter page opens with this so the reader always knows where they
   are: a small eyebrow (reading position + difficulty) above the title H1. */
.chapter-header { margin: 0 0 1.75rem; }
.chapter-header .chapter-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 700;
}
.chapter-header .chapter-title {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ── Charts (viz:graph) & math ──────────────────────────────────────────
   Chart/animation internals are themed by the viz runtime (runtime/theme.js,
   a port of the frontend's vegaTheme.ts); these rules only place the blocks
   in the reading column. Wide display math scrolls instead of overflowing. */
.viz-graph { margin: 1.5rem 0; }
.viz-graph .viz-graph-mount { width: 100%; }
/* Display equations (a lone $$…$$ line) render centered on their own line;
   wide ones scroll horizontally instead of overflowing the column. */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.35rem 0; text-align: center; margin: 1rem 0; }

/* ── Copy button on code blocks ─────────────────────────────────────────── */
.content pre, .slide pre { position: relative; }
.copy-btn {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  padding: 0.2rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.content pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--fg); border-color: var(--accent); }
.copy-btn.copied { color: #10b981; border-color: #10b981; opacity: 1; }

/* ── Per-chapter "on this page" section index (right column) ─────────────── */
/* Anchored jumps land below the sticky 56px topbar instead of under it. */
.content h2, .content h3 { scroll-margin-top: 72px; }
.chapter-toc { margin-bottom: 1.25rem; }
.chapter-toc .aside-heading {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}
.chapter-toc ol { list-style: none; margin: 0; padding: 0; }
.chapter-toc li { margin: 0.05rem 0; font-size: 0.85rem; line-height: 1.3; }
.chapter-toc li.lvl3 { padding-left: 0.85rem; font-size: 0.8rem; }
.chapter-toc a {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.35rem;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}
.chapter-toc a:hover { color: var(--fg); background: var(--surface); border-left-color: var(--accent); }
.chapter-toc a.active { color: var(--fg); border-left-color: var(--accent); font-weight: 600; }