/* ============================================
   GO CONCURRENCY BOOK - DESIGN SYSTEM v3.0
   ============================================

   TABLE OF CONTENTS:
   ------------------
   1. CSS Custom Properties (Design Tokens)
   2. Base Reset & Typography
   3. Layout (Background, Container)
   4. Chapter Header & Intro
   5. Headings & Section Groups
   6. Paragraphs, Text & Links
   7. Blockquotes
   8. Lists
   9. Callout Boxes:
      - .callout-note (cyan)
      - .callout-tip (green)
      - .callout-warning (yellow)
      - .callout-info (coral)
      - .callout-reference (green)
      - .callout-caution (red)
      - .callout-example (purple)
      - .callout-deep-dive (blue)
   10. Code Blocks:
       - .code-block (with header, line numbers)
       - File icons: .file-go (Gopher icon), generic fallback
   11. Terminal Output Blocks (.output-block, .terminal-line)
   12. ASCII Diagrams:
       - Variants: .ascii-diagram, .ascii-diagram-option-a
       - Color: .da-accent, .da-accent-purple, .da-accent-green,
               .da-accent-yellow, .da-accent-red, .da-muted
       - Animation: .da-flow
       - Fullscreen mode
   13. Info List & Info Cards (.info-list, .info-cards)
   14. Reference List (.reference-list)
   15. Common Mistakes (.mistakes-list, .mistake-item)
   16. Key Takeaways Box (.key-takeaways)
   17. Section Dividers
   18. Navigation Footer
   19. Sidebar Table of Contents
   20. Progress Bar & Scroll to Top
   21. Terminal Typing Animation
   22. Collapsible Sections (.collapsible)
   23. Figures & Captions
   24. Definition Lists
   25. Exercise Section (.exercise-section)
   26. Quiz Section (.quiz-section)
   27. Footnotes
   28. Version Badges (.version-badge)
   29. Myth-Busting Cards (.myth-busting-list)
   30. Learning Outcomes (.learning-outcomes)
   31. Print Styles
   32. Responsive Adjustments

   ============================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Primary Colors - Deep Navy Theme */
  --bg-deep: #0a0e27;
  --bg-primary: #0a0e27;
  --bg-surface: #0f172a;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
  --bg-elevated: #253356;

  /* Accent Colors */
  --accent: #06b6d4;
  --highlight: #8b5cf6;
  --success: #10b981;
  --warning: #f59e0b;

  /* Text Colors */
  --text-heading: #f1f5f9;
  --text-primary: #cbd5e1;
  --text-emphasis: #e2e8f0;
  --text-secondary: #94a3b8;
  /* WCAG AA: #64748b measured 3.99:1 on the page ground and only 3.26:1 on the
     diagram surface. #8b98a9 gives 6.48:1 / 5.28:1 and keeps a step below secondary. */
  --text-muted: #8b98a9;
  --text-accent: #06b6d4;

  /* Accent Color Palette */
  --accent-blue: #58a6ff;
  --accent-cyan: #06b6d4;
  --accent-green: #10b981;
  --accent-yellow: #f59e0b;
  --accent-orange: #f0883e;
  --accent-red: #f85149;
  --accent-purple: #8b5cf6;
  --accent-purple-text: #a78bfa;
  --accent-pink: #f778ba;

  /* Semantic Colors */
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.08);
  --color-tip: #10b981;
  --color-tip-bg: rgba(16, 185, 129, 0.08);
  --color-note: #06b6d4;
  --color-note-bg: rgba(6, 182, 212, 0.08);
  --color-error: #f85149;
  --color-error-bg: rgba(248, 81, 73, 0.1);

  /* Glass morphism */
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(6, 182, 212, 0.15);
  --glow-cyan: rgba(6, 182, 212, 0.4);
  --glow-purple: rgba(139, 92, 246, 0.4);

  /* Code Colors (Integrated Borderless) */
  --code-bg: #141b2d;
  --code-bg-darker: #0f1520;
  --code-border: rgba(148, 163, 184, 0.08);
  --code-gutter: #8c9bb2;
  --code-text: #a9b3c5;
  --code-keyword: #7ee787;
  --code-string: #a5d6ff;
  --code-comment: #7c879e;
  --code-function: #d2a8ff;
  --code-type: #ffa657;
  --code-number: #79c0ff;
  --code-operator: #ff7b72;
  --code-package: #ffa657;
  --code-variable: #ffa657;
  --code-constant: #79c0ff;
  --code-filename: #b0bdd0;

  /* ASCII Diagram Colors */
  --diagram-bg: #040a14;
  --diagram-border: #1e3a5f;
  --diagram-text: #8ec8f0;
  --diagram-highlight: #58a6ff;

  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography Scale */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1875rem; /* 19px — body copy */
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* Heading scale. Body copy is --font-size-lg (19px), so every heading level
     must sit above it in size AND weight, or hierarchy reads as noise. */
  --font-size-h2: 1.875rem; /* 30px — section opener  */
  --font-size-h3: 1.375rem; /* 22px — sub-head        */
  --font-size-h4: 1.25rem; /* 20px — scenario / step; must stay above body */
  --font-size-4xl: 2.25rem;

  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* Content Width */
  --content-width: 800px;
  --content-width-wide: 900px;
  --content-width-breakout: 920px;
}

/* --- Terminal Tokens --- */
:root {
  --term-prompt: #28c840;
  --term-command: #ffffff;
  --term-output: #c8d1de;
  --term-warn: #ffb454;
  --term-danger: #ff7a90;
  --term-accent: #7ab8ff;
  --term-muted: #77849c;
  --term-comment: #7c8da3;
  --term-divider: rgba(255, 255, 255, 0.08);
  --term-body-bg: linear-gradient(180deg, rgba(10, 15, 28, 0.6) 0%, rgba(8, 12, 22, 0.8) 100%);
  --term-left-border: #28c840;
}

/* --- Base Reset & Typography --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* NOT smooth: a chapter runs 40,000px+, so a ToC jump would animate the reader
     through the whole page. Anchors land instantly, offset by scroll-margin-top. */
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:target,
.section-group[id],
h2[id],
h3[id] {
  scroll-margin-top: 24px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  line-height: 1.75;
  color: var(--text-primary);
  background: var(--bg-deep);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== Static Background ===== */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Rich deep gradient - darker and more sophisticated */
  background:
    /* Subtle radial glow in center for focus */
    radial-gradient(
      ellipse 80% 50% at 50% 30%,
      rgba(15, 23, 42, 0.4) 0%,
      transparent 70%
    ),
    /* Main gradient - deeper navy tones */
    linear-gradient(
      180deg,
      #0f172a 0%,
      #0c1322 40%,
      #080d16 100%
    );
}

/* Vignette effect - draws focus to content */
.grid-pattern::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 60% at 50% 50%,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Subtle ambient glow accent */
.grid-pattern::after {
  content: '';
  position: fixed;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 60%;
  background: radial-gradient(
    ellipse at center,
    rgba(6, 182, 212, 0.03) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

/* Scroll-triggered fade-in animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* No will-change. It was applied to every un-revealed element at once —
     225 of them on chapter 2 — so the compositor was asked for 225 layers
     before a single animation started. opacity/transform transitions are
     composited anyway; the hint only cost memory and caused blank gaps
     during scroll. */
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Main Container --- */
.book-container {
  position: relative;
  z-index: 2;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 48px var(--space-lg) var(--space-3xl);
}

@media (min-width: 1024px) {
  .book-container {
    padding: 64px var(--space-xl) var(--space-3xl);
  }
}

/* --- Breakout Elements (wider than content) --- */
/* Note: Breakout with negative margins removed to prevent right-side clipping */
@media (min-width: 1024px) {
  .code-block,
  .ascii-diagram,
  .output-block {
    position: relative;
    width: 100%;
    max-width: 100%;
  }

/* Extra breathing room for diagrams */
  .ascii-diagram pre {
    padding-left: var(--space-2xl);
  }
}

/* --- Chapter Header --- */
.chapter-header {
  margin-bottom: var(--space-xl);
}

.chapter-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.chapter-intro {
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  line-height: 1.75;
  margin-bottom: var(--space-lg);
}

/* --- Chapter Intro Section --- */
.chapter-intro-section {
  border-left: 3px solid var(--accent);
  padding-left: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.chapter-intro-section .intro-block {
  margin-bottom: var(--space-lg);
}

.chapter-intro-section .intro-block:last-child {
  margin-bottom: 0;
}

.chapter-intro-section .intro-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.chapter-intro-section p {
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

.chapter-intro-section ul {
  margin-bottom: 0;
  padding-left: var(--space-md);
}

.chapter-intro-section li {
  color: var(--text-primary);
  margin-bottom: var(--space-sm);
}

/* Numbered circles for "What you'll learn" list */
.chapter-intro-section .intro-block:first-child ul {
  counter-reset: intro-item;
  list-style: none;
  padding-left: 0;
}

.chapter-intro-section .intro-block:first-child li {
  counter-increment: intro-item;
  position: relative;
  padding-left: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.chapter-intro-section .intro-block:first-child li::before {
  content: counter(intro-item);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5em;
  height: 1.5em;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.3),
    rgba(6, 182, 212, 0.1)
  );
  color: var(--accent);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(6, 182, 212, 0.3);
}

.chapter-intro-section .intro-block:first-child li::marker {
  content: none;
}

/* Regular bullet style for other lists */
.chapter-intro-section .intro-block:not(:first-child) li::marker {
  color: var(--text-muted);
}

/* --- Headings --- */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.35;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

h1 {
  font-size: var(--font-size-2xl);
  color: var(--text-heading);
}

h2 {
  font-size: var(--font-size-h2);
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h3 {
  font-size: var(--font-size-h3);
  color: var(--text-heading);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

h4 {
  font-size: var(--font-size-h4);
  color: var(--text-heading);
  font-weight: 600;
  margin-top: var(--space-xl);
}

/* --- Section Group --- */
.section-group {
  background: transparent;
  border: none;
  padding: 0;
  margin: var(--space-lg) 0;
}

.section-group + hr,
.section + hr,
section + hr {
  margin-top: var(--space-sm);
}

/* Section opener (“1.1 …”) — the only heading that gets the accent rule, so a
   new section is unmistakable across a 40,000px page. */
.section-group h1,
.section-group h2 {
  margin-top: 0;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(6, 182, 212, 0.28);
}

.section-group h1:first-of-type,
.section-group h2:first-of-type {
  margin-top: 0;
}

.section-group h1 ~ h2,
.section-group h2:not(:first-of-type) {
  margin-top: var(--space-2xl);
}

/* Sub-head — clearly above body copy, clearly below the section opener, and
   no rule of its own so it never competes with one. */
.section-group h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  color: var(--text-heading);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-sm);
  padding: 0;
  letter-spacing: -0.008em;
  line-height: 1.3;
}

.section-group h3:first-of-type {
  margin-top: var(--space-lg);
}

/* Scenario / numbered step — keeps the mono voice the old h3 had, one rung down. */
.section-group h4 {
  font-family: var(--font-mono);
  font-size: var(--font-size-h4);
  font-weight: 600;
  color: var(--text-emphasis);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.01em;
}

.section-group h4:first-of-type {
  margin-top: var(--space-md);
}

.section-group p {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.section-group .code-block {
  margin: var(--space-sm) 0 var(--space-md);
}

.section-group .callout {
  margin: var(--space-md) 0;
}

/* --- Paragraphs & Text --- */
p {
  margin-bottom: var(--space-md);
}

strong {
  color: var(--text-emphasis);
  font-weight: 600;
}

em {
  font-style: italic;
  color: var(--text-secondary);
}

a {
  color: var(--accent-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast);
}

a:hover {
  border-bottom-color: var(--accent-blue);
}

/* --- Blockquotes --- */
blockquote {
  position: relative;
  margin: var(--space-xl) 0;
  padding: var(--space-lg) var(--space-xl);
  padding-left: var(--space-2xl);
  background: linear-gradient(
    135deg,
    rgba(139, 92, 246, 0.08),
    rgba(10, 14, 39, 0.8)
  );
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-left: 4px solid var(--accent-purple);
}

blockquote::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 16px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--accent-purple);
  opacity: 0.3;
  line-height: 1;
}

blockquote p {
  font-style: italic;
  color: #ffffff;
  font-weight: 600;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
  position: relative;
  z-index: 1;
}

blockquote footer {
  font-style: normal;
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-sm);
}

blockquote footer::before {
  content: '';
}

/* --- Lists --- */
ul,
ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

li {
  margin-bottom: var(--space-sm);
}

li::marker {
  color: var(--text-muted);
}

/* --- Callout Boxes --- */
.callout {
  border-radius: 16px;
  padding: var(--space-lg);
  margin: var(--space-xl) 0;
  position: relative;
  backdrop-filter: blur(8px);
}



.callout-content {
  padding-left: var(--space-2xl);
}

.callout-title {
  font-weight: 700;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout code {
  background: rgba(0, 0, 0, 0.3);
}

/* Warning Callout - Yellow/Amber */
.callout-warning {
  background: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.08),
    rgba(245, 158, 11, 0.03)
  );
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-left: 4px solid var(--color-warning);
}

.callout-warning .callout-title {
  color: var(--color-warning);
  text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Tip Callout - Green */
.callout-tip {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 4px solid var(--color-tip);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

.callout-tip .callout-title {
  color: var(--color-tip);
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Note/Info Callout - Cyan */
.callout-note {
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.08),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-left: 4px solid var(--accent);
}

.callout-note .callout-title {
  color: var(--accent);
}

/* Info Callout - Coral/Salmon */
.callout-info {
  background: linear-gradient(
    135deg,
    rgba(251, 113, 133, 0.1),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-left: 4px solid #fb7185;
  box-shadow: 0 4px 20px rgba(251, 113, 133, 0.1);
}

.callout-info .callout-title {
  color: #fb7185;
  text-shadow: 0 0 20px rgba(251, 113, 133, 0.3);
}

/* Reference Callout - Green */
.callout-reference {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.1),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-left: 4px solid var(--success);
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}

.callout-reference .callout-title {
  color: var(--success);
  text-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Caution Callout - Red/Danger */
.callout-caution {
  background: linear-gradient(
    135deg,
    rgba(248, 81, 73, 0.1),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(248, 81, 73, 0.25);
  border-left: 4px solid var(--accent-red);
  box-shadow: 0 4px 20px rgba(248, 81, 73, 0.1);
}

.callout-caution .callout-title {
  color: var(--accent-red);
  text-shadow: 0 0 20px rgba(248, 81, 73, 0.3);
}

.callout-caution .callout-icon-svg {
  color: var(--accent-red);
  filter: drop-shadow(0 0 8px rgba(248, 81, 73, 0.6));
}

/* Example Callout - Purple */






/* Deep Dive Callout - Blue */
.callout-deep-dive {
  background: linear-gradient(
    135deg,
    rgba(88, 166, 255, 0.1),
    rgba(10, 14, 39, 0.8)
  );
  border: 1px solid rgba(88, 166, 255, 0.25);
  border-left: 4px solid var(--accent-blue);
  box-shadow: 0 4px 20px rgba(88, 166, 255, 0.1);
}

.callout-deep-dive .callout-title {
  color: var(--accent-blue);
  text-shadow: 0 0 20px rgba(88, 166, 255, 0.3);
}

.callout-deep-dive .callout-icon-svg {
  color: var(--accent-blue);
  filter: drop-shadow(0 0 8px rgba(88, 166, 255, 0.6));
}

/* Reduce spacing between consecutive callouts */
.callout + .callout {
  margin-top: var(--space-md);
}

/* Neon SVG Icons for Callouts */
.callout-icon-svg {
  width: 24px;
  height: 24px;
  position: absolute;
  top: var(--space-lg);
  left: var(--space-lg);
  filter: drop-shadow(0 0 6px currentColor);
}

.callout-note .callout-icon-svg {
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
}

.callout-info .callout-icon-svg {
  color: #fb7185;
  filter: drop-shadow(0 0 8px rgba(251, 113, 133, 0.6));
}

.callout-reference .callout-icon-svg {
  color: var(--success);
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.callout-warning .callout-icon-svg {
  color: var(--color-warning);
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
}

.callout-tip .callout-icon-svg {
  color: var(--color-tip);
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.6));
}

.callout ul,
.callout ol {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* --- Code Blocks (Integrated Borderless) --- */
pre {
  background: var(--code-bg);
  border-radius: 12px;
  padding: var(--space-lg) var(--space-xl);
  overflow-x: auto;
  margin: var(--space-lg) 0;
  position: relative;
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.03);
}

pre code {
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: 1.75;
  color: var(--code-text);
  background: none;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Reset all nested elements in code blocks */
pre code span,
.code-block pre code span {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Code block with language label */
.code-block {
  position: relative;
  margin: var(--space-xl) 0;
  border-radius: 12px;
  background: var(--code-bg);
  border: none;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.03);
}

.code-block-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: none;
  border-bottom: none;
  border-radius: 0;
  padding: 14px 20px 0 20px;
}

/* Filename label in code block header */
.code-block-filename {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--code-filename);
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.code-block-filename::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Language label in code block header */
.code-block-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

/* Go gopher icon (classic Renee French style) */
.code-block-filename.file-go::before {
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3C!-- Body --%3E%3Cellipse cx='50' cy='62' rx='28' ry='32' fill='%2367d7e1'/%3E%3C!-- Head --%3E%3Cellipse cx='50' cy='38' rx='30' ry='28' fill='%2367d7e1'/%3E%3C!-- Left ear --%3E%3Cellipse cx='25' cy='18' rx='6' ry='10' fill='%2367d7e1'/%3E%3Cellipse cx='25' cy='18' rx='3' ry='6' fill='%23d4b896'/%3E%3C!-- Right ear --%3E%3Cellipse cx='75' cy='18' rx='6' ry='10' fill='%2367d7e1'/%3E%3Cellipse cx='75' cy='18' rx='3' ry='6' fill='%23d4b896'/%3E%3C!-- Belly --%3E%3Cellipse cx='50' cy='68' rx='18' ry='20' fill='%23d4b896'/%3E%3C!-- Snout --%3E%3Cellipse cx='50' cy='48' rx='16' ry='12' fill='%23d4b896'/%3E%3C!-- Left eye --%3E%3Cellipse cx='36' cy='36' rx='10' ry='12' fill='white'/%3E%3Ccircle cx='38' cy='38' r='4' fill='%23333'/%3E%3C!-- Right eye --%3E%3Cellipse cx='64' cy='36' rx='10' ry='12' fill='white'/%3E%3Ccircle cx='66' cy='38' r='4' fill='%23333'/%3E%3C!-- Nose --%3E%3Cellipse cx='50' cy='48' rx='4' ry='3' fill='%23333'/%3E%3C!-- Teeth --%3E%3Crect x='45' y='54' width='4' height='6' rx='1' fill='white'/%3E%3Crect x='51' y='54' width='4' height='6' rx='1' fill='white'/%3E%3C!-- Arms --%3E%3Cellipse cx='24' cy='58' rx='5' ry='8' fill='%2367d7e1'/%3E%3Cellipse cx='76' cy='58' rx='5' ry='8' fill='%2367d7e1'/%3E%3C!-- Feet --%3E%3Cellipse cx='38' cy='92' rx='8' ry='5' fill='%2367d7e1'/%3E%3Cellipse cx='62' cy='92' rx='8' ry='5' fill='%2367d7e1'/%3E%3C/svg%3E");
}

/* Generic file icon fallback */
.code-block-filename:not([class*='file-'])::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'%3E%3C/path%3E%3Cpolyline points='13 2 13 9 20 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* macOS-style window dots */
.code-block-header .window-dots {
  display: flex;
  gap: 7px;
  margin-right: 4px;
}

.code-block-header .window-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.code-block-header .window-dots .dot-red {
  background: #ff5f57;
}

.code-block-header .window-dots .dot-yellow {
  background: #febc2e;
}

.code-block-header .window-dots .dot-green {
  background: #28c840;
}

.copy-btn {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(148, 163, 184, 0.8);
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-radius: 4px;
}

.copy-btn .copy-icon {
  width: 12px;
  height: 12px;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.copy-btn:hover {
  color: rgba(148, 163, 184, 1);
  background: rgba(148, 163, 184, 0.08);
}

.copy-btn:hover .copy-icon {
  opacity: 1;
}

.copy-btn.copied {
  color: var(--code-string);
}

.copy-btn.copied .copy-icon {
  opacity: 1;
}

.code-block pre {
  margin-top: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 16px 0 20px 0;
  /* Listings pasted verbatim from gofmt'd .go files are tab-indented; the
     browser default of 8 renders them 4 columns wider than the 4-space
     listings around them and pushes long lines into a scrollbar. */
  tab-size: 4;
  -moz-tab-size: 4;
}

/* Line highlighting effect on hover */
.code-block pre code {
  display: block;
}

/* --- Code Block with Line Numbers --- */
.code-block.with-line-numbers pre {
  padding-left: 0;
  padding-right: 0;
}

.code-block.with-line-numbers pre code {
  display: flex;
  flex-direction: column;
}

.code-block .code-line {
  display: flex;
  padding: 0 20px 0 0;
}

.code-block:hover .code-line:hover {
  background: rgba(148, 163, 184, 0.03);
}

.code-block .line-number {
  flex-shrink: 0;
  width: 3em;
  padding-right: 16px;
  padding-left: 20px;
  text-align: right;
  color: var(--code-gutter);
  user-select: none;
  font-size: 0.82em;
  margin-right: 20px;
}

.code-block .line-content {
  flex: 1;
  white-space: pre;
  color: var(--code-text);
}

/* Highlighted lines */




/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(20, 27, 45, 0.8);
  padding: 0.2em 0.5em;
  border-radius: var(--radius-sm);
  color: var(--code-variable);
  border: 1px solid rgba(148, 163, 184, 0.1);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
}

/* Code chips inside headings. The padding above is em-based, so at a 30px
   section title each chip carries ~13px a side — enough that a title with
   two of them wraps to a second line for the sake of a few pixels. Tighten
   it here only; body copy keeps the roomier default. */
h1 code,
h2 code,
h3 code,
h4 code {
  padding: 0.15em 0.35em;
}

/* Syntax Highlighting (Integrated Borderless) */
.token-keyword {
  color: var(--code-keyword);
}
.token-string {
  color: var(--code-string);
}
.token-comment {
  color: var(--code-comment);
}
.token-function {
  color: var(--code-function);
}
.token-type {
  color: var(--code-type);
}
.token-number {
  color: var(--code-number);
}
.token-operator {
  color: var(--code-operator);
}
.token-package {
  color: var(--code-package);
}
.token-builtin {
  color: var(--code-function);
}
.token-punctuation {
  color: var(--code-text);
}
.token-variable {
  color: var(--code-variable);
}
.token-constant {
  color: var(--code-constant);
}

/* --- Terminal Output Blocks (Black theme) --- */
.output-block {
  position: relative;
  border-radius: var(--radius-lg);
  margin: var(--space-xl) 0;
  overflow: hidden;
  background: var(--code-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--term-left-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 1px 0 0 rgba(255, 255, 255, 0.03),
    0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* Reduce gap when output follows code block */
.code-block + .output-block {
  margin-top: var(--space-xs);
}

/* Reduce gap when there's a small paragraph between code and output */
.code-block + p + .output-block {
  margin-top: var(--space-xs);
}

.code-block + p {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.output-block .terminal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.output-block .terminal-header .window-dots {
  display: flex;
  gap: 7px;
  margin-right: 4px;
}

.output-block .terminal-header .window-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.output-block .terminal-header .dot-red { background: #ff5f57; }
.output-block .terminal-header .dot-yellow { background: #febc2e; }
.output-block .terminal-header .dot-green { background: #28c840; }

.output-block .terminal-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(148, 163, 184, 0.85);
  letter-spacing: 0.03em;
}

.output-block .terminal-body {
  padding: 16px 20px 20px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  color: var(--term-output);
  background: var(--term-body-bg);
  font-variant-ligatures: none;
  font-feature-settings: 'liga' 0, 'calt' 0;
}

/* Indentation inside a terminal row is carried by  , never by
   source whitespace. Using pre-wrap here made the rows render their own
   HTML formatting — a blank line and ~14 columns of indent per row — so
   any tool that reflowed the markup silently broke every transcript in
   the book. normal + break-word renders   runs identically and
   makes that failure impossible. */
.output-block .terminal-line {
  white-space: normal;
  overflow-wrap: break-word;
  min-height: 1.7em;
}

.output-block .terminal-line:empty,
.output-block .terminal-line-blank {
  min-height: 0.85em;
}

.output-block .terminal-prompt {
  color: var(--term-prompt);
  font-weight: 600;
  user-select: none;
  margin-right: 8px;
}

.output-block .terminal-command {
  color: var(--term-command);
  font-weight: 500;
}

.output-block .terminal-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--term-divider), transparent);
  margin: 10px 0 12px;
}

/* Semantic color classes */
.output-block .terminal-warn { color: var(--term-warn); font-weight: 700; }
.output-block .terminal-danger { color: var(--term-danger); font-weight: 600; }
.output-block .terminal-accent { color: var(--term-accent); }
.output-block .terminal-muted { color: var(--term-muted); }
.output-block .terminal-comment { color: var(--term-comment); font-style: italic; }
.output-block .terminal-success { color: var(--term-prompt); }

/* Hover state */
.output-block:hover {
  border-color: rgba(255, 255, 255, 0.15);
  border-left-color: var(--term-left-border);
}

/* --- ASCII Diagrams Base --- */
.ascii-diagram {
  border-radius: 16px;
  padding: var(--space-xl);
  margin: var(--space-xl) 0;
  overflow-x: auto;
  position: relative;
  background: linear-gradient(135deg, #1e2433 0%, #161a26 100%);
  border: 1px solid rgba(226, 232, 240, 0.12);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.ascii-diagram pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  box-shadow: none;
}

.ascii-diagram code {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
  background: none;
  padding: 0;
  white-space: pre;
  display: block;
  border: none;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.85);
}

/* Diagram title */
.diagram-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  font-weight: 700;
  color: var(--accent);
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

/* ASCII Diagram Style (Clean Monochrome — used for tables/data diagrams) */
.ascii-diagram-option-a {
  /* Background/border/shadow inherited from .ascii-diagram base */
}

.ascii-diagram-option-a code {
  color: #e2e8f0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
}

.ascii-diagram-option-a .diagram-title {
  color: #94a3b8;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

/* ============================================
   ENHANCED DIAGRAM FEATURES
   ============================================ */

/* --- Color Accents for Key Elements --- */
.ascii-diagram .da-muted {
  /* Diagram captions carry the punchline of each figure — they must clear AA
     against the diagram surface (#1e2433 → #161a26), not just the page ground. */
  color: var(--text-muted);
}

.ascii-diagram .da-accent {
  color: #06b6d4;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.ascii-diagram .da-accent-purple {
  color: #a78bfa;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}

.ascii-diagram .da-accent-green {
  color: #34d399;
  text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}

.ascii-diagram .da-accent-yellow {
  color: #fbbf24;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.ascii-diagram .da-accent-red {
  color: #f87171;
  text-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

/* A fifth state colour. The accent family is cyan/purple/green/yellow/red, so a
   lifecycle diagram that needs one more distinct state (chapter 2's Created ->
   Running -> Blocked) had nowhere to go. */
.ascii-diagram .da-accent-blue {
  color: #60a5fa;
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

/* Go source shown inside a diagram rather than a code block. These reuse the
   code-block variables so a keyword is the same green in both places. */
.ascii-diagram .da-keyword {
  color: var(--code-keyword);
}

.ascii-diagram .da-function {
  color: var(--code-function);
}

.ascii-diagram .da-operator {
  color: var(--code-operator);
}

.ascii-diagram .da-punctuation {
  color: var(--code-text);
}

/* --- Animated Flow Lines --- */
.ascii-diagram .da-flow {
  color: #06b6d4;
  animation: flow-pulse 2s ease-in-out infinite;
}

@keyframes flow-pulse {
  0%, 100% {
    opacity: 0.4;
    text-shadow: none;
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 8px currentColor;
  }
}

/* Animated arrow that moves */
.ascii-diagram .da-arrow-animated {
  display: inline-block;
  animation: arrow-move 1.5s ease-in-out infinite;
  color: #06b6d4;
}

@keyframes arrow-move {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(3px);
    opacity: 1;
    text-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
  }
}



/* --- Fullscreen/Zoom Mode --- */
.diagram-fullscreen-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 10;
}

.ascii-diagram:hover .diagram-fullscreen-btn {
  opacity: 1;
}

.diagram-fullscreen-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
  color: #06b6d4;
}

.diagram-fullscreen-btn svg {
  width: 16px;
  height: 16px;
}

/* Fullscreen overlay */
.diagram-fullscreen-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 39, 0.95);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.diagram-fullscreen-overlay.active {
  opacity: 1;
  visibility: visible;
}

.diagram-fullscreen-content {
  max-width: 95vw;
  max-height: 90vh;
  overflow: auto;
  padding: 40px;
  background: linear-gradient(135deg, #1e2433 0%, #161a26 100%);
  border-radius: 16px;
  border: 1px solid rgba(6, 182, 212, 0.3);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.diagram-fullscreen-overlay.active .diagram-fullscreen-content {
  transform: scale(1);
}

.diagram-fullscreen-content pre {
  margin: 0;
  background: transparent;
  border: none;
}

.diagram-fullscreen-content code {
  font-size: 16px;
  line-height: 1.6;
}

.diagram-fullscreen-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(30, 41, 59, 0.9);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 50%;
  color: #e2e8f0;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.diagram-fullscreen-close:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
}

.diagram-fullscreen-title {
  position: absolute;
  top: 24px;
  left: 30px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: #06b6d4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .ascii-diagram [class*="da-flow"],
  .ascii-diagram [class*="da-arrow"] {
    animation: none;
  }

  .ascii-diagram .da-flow {
    opacity: 1;
    text-shadow: 0 0 6px currentColor;
  }
}

/* --- Chapter Summary Section --- */








/* --- Reference List --- */












/* --- Mistakes List --- */
.mistakes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.mistake-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.08);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.mistake-item:hover {
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.06);
}

.mistake-title {
  grid-column: 1 / -1;
  font-weight: 600;
  color: #f1f5f9;
  font-size: var(--font-size-base);
  padding: var(--space-sm) var(--space-md);
  background: rgba(30, 41, 59, 0.4);
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.mistake-problem,
.mistake-fix {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  align-items: flex-start;
}

.mistake-problem {
  background: rgba(248, 113, 113, 0.08);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
}

.mistake-fix {
  background: rgba(74, 222, 128, 0.08);
}

.mistake-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}

.mistake-problem .mistake-icon {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.mistake-fix .mistake-icon {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.mistake-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.mistake-problem .mistake-label {
  color: #f87171;
}

.mistake-fix .mistake-label {
  color: #4ade80;
}

.mistake-problem p,
.mistake-fix p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #cbd5e1;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .mistake-item {
    grid-template-columns: 1fr;
  }

  .mistake-problem {
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }
}



/* --- Section Divider --- */
hr {
  border: none;
  height: auto;
  background: transparent;
  margin: var(--space-xl) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

hr + h2,
hr + h3,
hr + h4,
hr + .section-group,
hr + .section,
hr + section,
hr + .key-takeaways,
hr + .callout,
hr + .chapter-nav {
  margin-top: 0;
}

hr + .section-group > h2:first-child,
hr + .section > h2:first-child,
hr + section > h2:first-child,
hr + .section-group > h3:first-child,
hr + .section > h3:first-child,
hr + section > h3:first-child,
hr + div > h3:first-child {
  margin-top: 0;
}

hr::before {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(6, 182, 212, 0.4),
    transparent
  );
}

/* Section divider with icon */






/* --- Key Takeaways Box --- */
.key-takeaways {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.08),
    rgba(10, 14, 39, 0.9)
  );
  border-radius: 20px;
  padding: var(--space-xl);
  margin: var(--space-2xl) 0;
  border: 1px solid rgba(16, 185, 129, 0.2);
  position: relative;
  overflow: hidden;
}

.key-takeaways::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--success), transparent);
}

/* Chapters 3, 4 and 7 head this box with h3, the rest with h4. At
   --font-size-sm the h3 rendered at 14px, smaller than the 19px body
   copy it introduces — a heading quieter than its own content. Both
   tags now sit at body size, so the box reads the same either way. */
.key-takeaways h3,
.key-takeaways h4 {
  color: var(--success);
  margin-top: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-lg);
}

.key-takeaways ol {
  counter-reset: takeaway;
  list-style: none;
  padding-left: 0;
}

.key-takeaways li {
  counter-increment: takeaway;
  position: relative;
  padding-left: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

.key-takeaways li::before {
  content: counter(takeaway);
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.5em;
  height: 1.5em;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.3),
    rgba(16, 185, 129, 0.1)
  );
  color: var(--success);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

/* --- Navigation Footer --- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(6, 182, 212, 0.15);
  gap: var(--space-md);
}

.nav-link {
  display: flex;
  flex-direction: column;
  padding: var(--space-md) var(--space-lg);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.6),
    rgba(10, 14, 39, 0.8)
  );
  border-radius: 16px;
  border: 1px solid rgba(6, 182, 212, 0.15);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 180px;
  backdrop-filter: blur(8px);
}

.nav-link:hover {
  border-color: rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 20px rgba(6, 182, 212, 0.1);
}

.nav-label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-xs);
  font-weight: 600;
}

.nav-title {
  font-weight: 500;
  color: var(--text-heading);
  font-size: var(--font-size-sm);
}

.nav-link-prev {
  text-align: left;
}

.nav-link-next {
  text-align: right;
}

/* --- Scroll to Top Button --- */
.scroll-top {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.15),
    rgba(139, 92, 246, 0.1)
  );
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--font-size-lg);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-top:hover {
  color: #ffffff;
  border-color: var(--accent);
  background: linear-gradient(
    135deg,
    rgba(6, 182, 212, 0.3),
    rgba(139, 92, 246, 0.2)
  );
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.2);
}

/* --- Reading Progress Bar --- */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  /* above the site header, so the 3px hairline stays visible */
  z-index: 60;
  width: 0%;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent),
    var(--highlight),
    var(--success)
  );
  z-index: 9999;
  transition: width 100ms ease-out;
}

/* --- Sidebar Table of Contents --- */
.sidebar-toc {
  position: fixed;
  top: 100px;
  left: max(calc((100vw - var(--content-width)) / 2 - 280px), 20px);
  width: 220px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: var(--space-md);
  background: linear-gradient(
    135deg,
    rgba(15, 23, 42, 0.95),
    rgba(10, 14, 39, 0.98)
  );
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.15);
  backdrop-filter: blur(12px);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.sidebar-toc.visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sidebar-toc-title {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}

.sidebar-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-toc-list li {
  margin-bottom: var(--space-xs);
}

.sidebar-toc-list a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: 6px;
  border-bottom: none;
  transition: all 0.2s ease;
  line-height: 1.4;
}

.sidebar-toc-list a:hover {
  color: var(--text-heading);
  background: rgba(6, 182, 212, 0.1);
  border-bottom: none;
}

.sidebar-toc-list a.active {
  color: var(--accent);
  background: rgba(6, 182, 212, 0.15);
  font-weight: 500;
}

.sidebar-toc-list .toc-section-number {
  color: var(--text-muted);
  font-weight: 400;
  margin-right: 4px;
}

/* Nested sub-sections in the rail. Indented and quieter than the section rows,
   so position is legible without the list turning into a wall. */
.sidebar-toc-list .toc-sub {
  margin-left: 10px;
  padding-left: 8px;
  border-left: 1px solid rgba(148, 163, 184, 0.18);
}

.sidebar-toc-list .toc-sub a {
  font-size: 0.8125rem;
  padding: 3px 8px;
  color: var(--text-muted);
}

.sidebar-toc-list .toc-sub a.active {
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.08);
}

/* ---- Below the sidebar breakpoint: a real, reachable ToC ----
   Previously the rail was simply display:none under 1400px, which left every
   1366px laptop, tablet and phone with no in-page navigation at all on a
   40,000px chapter. */
.toc-toggle {
  display: none;
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 60;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 10px;
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.toc-toggle:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

@media (max-width: 1400px) {
  .toc-toggle {
    display: inline-flex;
  }

  .sidebar-toc {
    display: block;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 140px;
    top: auto;
    width: auto;
    max-width: 420px;
    margin-left: auto;
    max-height: min(60vh, 460px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }

/* On small screens the rail is opened deliberately, not by scroll position. */
  .sidebar-toc.visible {
    opacity: 0;
    visibility: hidden;
  }

  .sidebar-toc.toc-open,
  .sidebar-toc.visible.toc-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .sidebar-toc-list a {
    padding: 9px 10px;
  }
}

@media print {
  .toc-toggle {
    display: none !important;
  }
}

/* Custom scrollbar for sidebar */
.sidebar-toc::-webkit-scrollbar {
  width: 4px;
}

.sidebar-toc::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-toc::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 2px;
}

.sidebar-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.5);
}

/* --- Terminal Typing Animation --- */
.output-block .terminal-body code {
  position: relative;
}

/* Typing effect for terminal commands */
.output-block.typing-ready .terminal-body code,
.output-block.typing-ready .terminal-line {
  opacity: 0;
}

.output-block.typing-active .terminal-body code {
  opacity: 1;
}

/* Multi-line terminal animation: lines revealed individually via JS */
.output-block.typing-active .terminal-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.output-block.typing-active .terminal-line.line-visible {
  opacity: 1;
  transform: translateY(0);
}

/* The typed text container */


/* Blinking cursor during typing */


/* Cursor blink animation */


/* Cursor stays solid briefly after typing completes */




/* Optional: Add a subtle glow to the command being typed */
.output-block.typing-active .terminal-body {
  box-shadow: inset 0 0 30px rgba(40, 200, 64, 0.03);
}

/* Prompt that appears before typing starts */




/* --- Collapsible/Accordion Sections --- */
.collapsible {
  margin: var(--space-lg) 0;
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.2);
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
  overflow: hidden;
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.collapsible-header:hover {
  background: rgba(6, 182, 212, 0.05);
}

.collapsible-title {
  font-weight: 600;
  color: var(--text-heading);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.collapsible-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.collapsible.open .collapsible-icon {
  transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.collapsible.open .collapsible-content {
  max-height: 2000px;
  transition: max-height 0.5s ease-in;
}

.collapsible-body {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid rgba(6, 182, 212, 0.1);
}

/* --- Figure/Image Styles with Captions --- */
figure {
  margin: var(--space-xl) 0;
  padding: 0;
}

figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(6, 182, 212, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

figcaption {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-align: center;
  font-style: italic;
}

figcaption strong {
  color: var(--text-heading);
  font-style: normal;
}

/* --- Definition Lists --- */
dl {
  margin: var(--space-lg) 0;
}

dt {
  font-weight: 600;
  color: var(--accent);
  font-size: var(--font-size-base);
  margin-top: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
}

dt:first-child {
  margin-top: 0;
}

dd {
  margin-left: var(--space-lg);
  margin-top: var(--space-sm);
  color: var(--text-primary);
  padding-left: var(--space-md);
  border-left: 2px solid rgba(6, 182, 212, 0.15);
}

dd + dd {
  margin-top: var(--space-xs);
}

/* --- Exercise/Practice Section --- */




















/* --- Quiz Section --- */


.quiz-question {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(6, 182, 212, 0.1);
}

.quiz-question:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.quiz-question h4 {
  color: var(--text-heading);
  font-size: var(--font-size-base);
  margin: 0 0 var(--space-md) 0;
}

.quiz-options {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quiz-options li {
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-xs);
  background: rgba(30, 41, 59, 0.4);
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quiz-options li:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
}

.quiz-options li.selected {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--accent);
}

.quiz-options li.correct {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--success);
}

.quiz-options li.incorrect {
  background: rgba(248, 81, 73, 0.15);
  border-color: var(--accent-red);
}

/* --- Footnotes --- */












/* --- Version/Update Badge --- */








/* --- Myth-Busting Cards --- */
.myth-busting-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.myth-busting-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.08);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.myth-busting-item:hover {
  border-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 0 16px rgba(148, 163, 184, 0.06);
}

.myth-busting-misconception,
.myth-busting-reality {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  align-items: flex-start;
}

.myth-busting-misconception {
  background: rgba(245, 158, 11, 0.06);
  border-right: 1px solid rgba(148, 163, 184, 0.08);
}

.myth-busting-reality {
  background: rgba(6, 182, 212, 0.06);
}

.myth-busting-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  margin-top: 1px;
}

.myth-busting-misconception .myth-busting-icon {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent-yellow);
}

.myth-busting-reality .myth-busting-icon {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent-cyan);
}

.myth-busting-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.myth-busting-misconception .myth-busting-label {
  color: var(--accent-yellow);
}

.myth-busting-reality .myth-busting-label {
  color: var(--accent-cyan);
}

.myth-busting-misconception p,
.myth-busting-reality p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #cbd5e1;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .myth-busting-item {
    grid-template-columns: 1fr;
  }

  .myth-busting-misconception {
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  }
}

/* --- Category 6: Learning Outcomes Checklist --- */
.learning-outcomes {
  margin: var(--space-xl) 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(10, 14, 39, 0.8));
  border: 1px solid rgba(16, 185, 129, 0.2);
  overflow: hidden;
  position: relative;
}

.learning-outcomes::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-cyan));
}

.learning-outcomes h3 {
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--accent-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(16, 185, 129, 0.15);
  background: rgba(16, 185, 129, 0.05);
}

.learning-outcomes-list {
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  counter-reset: outcome;
}

.learning-outcomes-list li {
  counter-increment: outcome;
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.06);
  margin-bottom: 0;
}

.learning-outcomes-list li:last-child {
  border-bottom: none;
}

.learning-outcomes-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 1.75em;
  height: 1.75em;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(16, 185, 129, 0.1));
  color: var(--accent-green);
  border-radius: 50%;
  font-size: var(--font-size-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-top: 2px;
}



.learning-outcomes-ability {
  color: var(--text-primary);
  font-size: var(--font-size-sm);
}

@media (max-width: 640px) {
  .learning-outcomes-list li {
    flex-wrap: wrap;
  }


}

/* --- Info Table (readable data grid) --- */






/* 2-column layout */


/* 3-column layout */


/* Header row */




/* Data rows */




/* Subtle separator between rows — only on non-last rows */


/* Hover highlight entire row */


/* First column (label) emphasis */


/* Code inside info-table */


/* Responsive: stack on narrow screens */


/* --- Info List (.info-list) ---
   For 2-column key/value data (replaces Aspect/Behavior tables).
   Clean term-description pairs in a bordered container.
   ------------------------------------------------------------ */
.info-list {
  display: grid;
  /* Term column sizes to the widest term in THIS list, capped so a long
     term can never starve the description. */
  grid-template-columns: fit-content(45%) 1fr;
  border-radius: 10px;
  border: 1px solid rgba(6, 182, 212, 0.1);
  background: rgba(15, 23, 42, 0.4);
  overflow: hidden;
  margin: 1.2rem 0;
}
.info-list-title {
  grid-column: 1 / -1;
  padding: 12px 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.06), rgba(139, 92, 246, 0.03));
  border-bottom: 1px solid rgba(6, 182, 212, 0.08);
}
/* Each row takes its columns from the parent via subgrid, so the term
   column is one shared width across the whole list. Keep the row free of
   horizontal padding — that would inset its tracks out of alignment; the
   cells carry it instead. */
.info-list-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  padding: 12px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.05);
  transition: background 0.15s ease;
}
.info-list-item:last-child { border-bottom: none; }
.info-list-item:hover { background: rgba(6, 182, 212, 0.03); }
.info-list-term {
  min-width: 8rem;
  padding-left: 20px;
  padding-right: 24px;
  color: var(--accent-green);
  font-weight: 500;
  font-size: var(--font-size-base);
}
.info-list-desc {
  padding-right: 20px;
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.info-list code,
.info-list-desc code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(240, 136, 62, 0.1);
  color: var(--accent-orange);
}

/* --- Info Cards (.info-cards) ---
   For 3+ column data (replaces multi-column tables).
   Each row becomes a card with a label + attribute fields.
   ------------------------------------------------------------ */
.info-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 1.2rem 0;
  /* One source of truth for the row-label column. The header spacer and
     every row label must stay identical or the header rule stops lining
     up with the body dividers. */
  --info-label-w: 228px;
}
.info-cards-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.info-cards-caption {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 12px;
  max-width: 100%;
}
.info-card {
  display: flex;
  gap: 0;
  border-radius: 8px;
  border: 1px solid rgba(6, 182, 212, 0.08);
  background: rgba(15, 23, 42, 0.4);
  overflow: hidden;
  transition: all 0.15s ease;
}
.info-card:hover {
  border-color: rgba(6, 182, 212, 0.15);
  background: rgba(15, 23, 42, 0.6);
}
.info-card-label {
  flex: 0 0 var(--info-label-w);
  padding: 14px 18px;
  background: rgba(6, 182, 212, 0.04);
  border-right: 1px solid rgba(6, 182, 212, 0.08);
  color: var(--text-emphasis);
  font-weight: 600;
  font-size: 0.9rem;
}
/* A row label that is a code expression must not break mid-call:
   `var ch = make(chan int)` split across two lines reads as two
   statements. Prose labels still wrap normally. */
.info-card-label code {
  white-space: nowrap;
}
.info-card-body {
  flex: 1;
  display: flex;
  gap: 0;
}
.info-card-field {
  flex: 1;
  padding: 14px 18px;
  font-size: 0.9rem;
}
.info-card-field + .info-card-field {
  border-left: 1px solid rgba(148, 163, 184, 0.05);
}
.info-card-field-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.info-card-field-label code {
  text-transform: none;
}
.info-card-field-value {
  color: var(--text-primary);
}
.info-card-field-value.green { color: var(--accent-green); }
.info-card-field-value.red { color: var(--accent-red); font-weight: 600; }
.info-card-field-value.yellow { color: var(--accent-yellow); }
/* Header row for uniform-column info-cards (shows column names once) */
.info-cards-header {
  display: flex;
  gap: 0;
  border-radius: 8px 8px 0 0;
  border: 1px solid rgba(6, 182, 212, 0.12);
  border-bottom: none;
  background: rgba(6, 182, 212, 0.06);
}
.info-cards--has-header {
  gap: 0;
}
.info-cards--has-header .info-card {
  border-radius: 0;
  border-top: none;
}
.info-cards--has-header .info-card:last-child {
  border-radius: 0 0 8px 8px;
}
.info-cards-header-spacer {
  flex: 0 0 var(--info-label-w);
  border-right: 1px solid rgba(6, 182, 212, 0.08);
  /* The row-label column often has a real name ("Aspect", "Also running").
     Match the other headers so naming it looks deliberate, not misaligned. */
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
}
.info-cards-header-columns {
  flex: 1;
  display: flex;
  gap: 0;
}
.info-cards-header-col {
  flex: 1;
  padding: 10px 18px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
}
.info-cards-header-col + .info-cards-header-col {
  border-left: 1px solid rgba(148, 163, 184, 0.05);
}
.info-cards-header-col code {
  text-transform: none;
}
/* Hide per-row field labels when header is present */
.info-cards--has-header .info-card-field-label {
  display: none;
}

.info-cards code,
.info-card code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82em;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(240, 136, 62, 0.1);
  color: var(--accent-orange);
}

/* Responsive: stack info-list and info-cards on small screens */
@media (max-width: 600px) {
  .info-list {
    grid-template-columns: 1fr;
  }
  .info-list-term {
    min-width: 0;
    padding: 0 20px;
  }
  .info-list-desc {
    padding: 4px 20px 0;
  }
  .info-card {
    flex-direction: column;
  }
  .info-card-label {
    flex: none;
    border-right: none;
    border-bottom: 1px solid rgba(6, 182, 212, 0.08);
  }
  .info-card-body {
    flex-direction: column;
  }
  .info-card-field + .info-card-field {
    border-left: none;
    border-top: 1px solid rgba(148, 163, 184, 0.05);
  }
  .info-cards-header {
    display: none;
  }
  .info-cards--has-header .info-card-field-label {
    display: block;
  }
}

/* --- Print Styles --- */
@media print {
  body {
    background: white;
    color: black;
  }

  .book-container {
    max-width: 100%;
  }

  .progress-bar,
  .scroll-top,
  .copy-btn {
    display: none;
  }

  pre,
  .ascii-diagram {
    border: 1px solid #ccc;
    background: #f5f5f5;
  }

  code {
    color: black;
  }

/* Diagram accent spans kept their dark-theme colors and printed pale-on-pale.
     Re-ink them for paper, preserving the distinction between roles. */
  .ascii-diagram code,
  .ascii-diagram .da-accent,
  .ascii-diagram .da-accent-green,
  .ascii-diagram .da-accent-purple,
  .ascii-diagram .da-accent-yellow,
  .ascii-diagram .da-accent-red,
  .ascii-diagram .da-accent-blue,
  .ascii-diagram .da-keyword,
  .ascii-diagram .da-function,
  .ascii-diagram .da-operator,
  .ascii-diagram .da-punctuation,
  .ascii-diagram .da-muted,
  .output-block,
  .terminal-body {
    color: #1a1a1a !important;
    text-shadow: none !important;
  }

  .ascii-diagram .da-accent { color: #05606b !important; }
  .ascii-diagram .da-accent-green { color: #0a6b45 !important; }
  .ascii-diagram .da-accent-purple { color: #5b3ba8 !important; }
  .ascii-diagram .da-accent-yellow { color: #8a5a00 !important; }
  .ascii-diagram .da-accent-red { color: #a01f26 !important; }
  .ascii-diagram .da-accent-blue { color: #1e40af !important; }
  .ascii-diagram .da-keyword { color: #0a6b45 !important; }
  .ascii-diagram .da-function { color: #5b3ba8 !important; }
  .ascii-diagram .da-operator { color: #a01f26 !important; }
  .ascii-diagram .da-punctuation { color: #333 !important; }
  .ascii-diagram .da-muted { color: #555 !important; }

/* Scroll-reveal left anything below the fold at opacity 0 — it printed blank. */
  .fade-in-up,
  .fade-in-section,
  [class*='fade-in'] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

/* Answers are part of the printed chapter. */
  .collapsible-content {
    max-height: none !important;
    overflow: visible !important;
  }

  .collapsible-icon,
  .sidebar-toc,
  .toc-toggle,
  .diagram-fullscreen-btn {
    display: none !important;
  }

  .ascii-diagram,
  .code-block,
  .callout,
  .info-cards,
  .collapsible {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  h2,
  h3,
  h4 {
    break-after: avoid;
    page-break-after: avoid;
    color: black;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.85em;
    color: #444;
    word-break: break-all;
  }
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  :root {
    --font-size-base: 0.9375rem;
    --font-size-lg: 1.0625rem; /* 17px body */
    /* Scale headings down together so the hierarchy survives the breakpoint.
       h4 must stay ABOVE body here too — at the old values both were 1rem. */
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1.125rem;
  }

  .chapter-title {
    font-size: var(--font-size-2xl);
  }

  h1 {
    font-size: var(--font-size-2xl);
  }

  pre code,
  .ascii-diagram code {
    font-size: 0.8125rem;
  }

  .chapter-nav {
    flex-direction: column;
  }

  .nav-link {
    width: 100%;
    min-width: unset;
  }
}

/* Phone. Diagrams run to ~68 columns; nothing makes that fit legibly at 374px,
   so we shrink what we can and make the fullscreen escape hatch obvious. */
@media (max-width: 480px) {
  pre code,
  .ascii-diagram code {
    font-size: 0.6875rem;
    line-height: 1.6;
  }

  .ascii-diagram {
    padding: var(--space-md);
  }

  .ascii-diagram::after {
    content: 'scroll →  or tap ⤢ for fullscreen';
    display: block;
    margin-top: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
  }
}

/* The fullscreen affordance was hover-only, so it did not exist on touch and
   could not be reached by keyboard. */
.ascii-diagram:focus-within .diagram-fullscreen-btn,
.diagram-fullscreen-btn:focus-visible {
  opacity: 1;
}

.diagram-fullscreen-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .diagram-fullscreen-btn {
    opacity: 1;
    width: 40px;
    height: 40px;
  }
}

/* ============================================
   CHAPTER SHELL — added in the ch1 acceptance pass
   ============================================ */

/* --- Reading measure ---------------------------------------------------
   Prose spans the FULL column, exactly like every diagram, table and code
   block beside it. An earlier 38rem cap gave a nicer line length but left
   252 paragraphs at 608px inside a 736px column — text that reads as 83%
   of the width of the figure above it looks like a layout bug, and it is
   the single most visible thing on the page.

   The measure is controlled by body size instead: 19px against the 736px
   column gives ~81 characters. Not the textbook 65-75, but the column
   cannot narrow — the widest ASCII diagram needs 670px of the 672px it
   has — so the choice is 81 characters aligned, or 70 misaligned. */
.section-group > p,
.section-group > ul,
.section-group > ol,
.chapter-intro > p,
.further-reading li,
.section-summary p,
.chapter-bridge p,
.version-note {
  max-width: 100%;
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--bg-deep);
  background: var(--accent-cyan);
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* --- Chapter meta bar (breadcrumb · position · time · back to library) --- */










/* --- Section summary (closes every numbered section) --- */
.section-summary {
  margin: var(--space-xl) 0 0;
  padding: var(--space-md) var(--space-lg);
  background: rgba(15, 23, 42, 0.5);
  border-left: 2px solid rgba(6, 182, 212, 0.45);
  border-radius: 0 8px 8px 0;
}

.section-summary .ss-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: var(--space-xs);
}

.section-summary p {
  margin: 0;
  color: var(--text-primary);
}

/* --- Exercise block (gate 04: every chapter ships a failing test) --- */
.exercise {
  margin: var(--space-2xl) 0;
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.07),
    rgba(10, 14, 39, 0.85)
  );
}

.exercise-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid rgba(16, 185, 129, 0.22);
}

.exercise-label {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-green);
}

.exercise-title {
  font-family: var(--font-sans);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-heading);
  margin: 0;
}

.exercise-body {
  padding: var(--space-lg);
}

.exercise-body > p:last-child {
  margin-bottom: 0;
}

.exercise-body .code-block,
.exercise-body .output-block {
  margin: var(--space-md) 0;
}

.exercise-done {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--accent-green);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.exercise-done strong {
  color: var(--accent-green);
  font-weight: 600;
}

/* Exercise flow: the green card carries only the brief; the worked material
   (code, terminals, connecting prose, done-when) breathes outside it, at the
   same width as the rest of the chapter. Plain `.exercise` keeps the older
   all-in-one card. */
.exercise-flow {
  margin: var(--space-2xl) 0;
}

.exercise-flow > .exercise-brief {
  margin: 0 0 var(--space-xl);
}

.exercise-flow > p {
  margin: var(--space-lg) 0;
}

.exercise-flow > .code-block,
.exercise-flow > .output-block {
  margin: var(--space-lg) 0;
}

/* Keep an evidence caption attached to the terminal it describes. */
.exercise-flow > .output-block:has(+ .evidence) {
  margin-bottom: var(--space-xs);
}

.exercise-flow > .exercise-done {
  margin: var(--space-lg) 0 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: rgba(16, 185, 129, 0.05);
}

/* --- Evidence label: every figure is measured or illustrative --- */
.evidence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-sm);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.evidence-measured {
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.12);
}

.evidence-illustrative {
  color: var(--accent-yellow);
  background: rgba(245, 158, 11, 0.12);
}

/* Derived = arithmetic the reader can redo, as distinct from a measurement. */
.evidence-derived {
  color: var(--accent-cyan);
  background: rgba(6, 182, 212, 0.12);
}

/* The note sits inside the badge, so it inherits the badge's 12% tint on top
   of the diagram surface. --text-muted drops to 4.28:1 there; secondary holds
   4.89:1 against the lightest of the three tints. */
.evidence-note {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: 0.78125rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 400;
  color: var(--text-secondary);
}

/* --- Further reading --- */
.further-reading {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
}

.further-reading h3 {
  margin-top: 0 !important;
  margin-bottom: var(--space-md) !important;
}

.further-reading ul {
  margin: 0;
  padding-left: 1.1rem;
}

.further-reading li {
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.further-reading li:last-child {
  margin-bottom: 0;
}

.further-reading a {
  color: var(--accent-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(6, 182, 212, 0.35);
}

.further-reading a:hover,
.further-reading a:focus-visible {
  border-bottom-color: var(--accent-cyan);
}

/* --- Bridge to the next chapter --- */
.chapter-bridge {
  margin: var(--space-2xl) 0 var(--space-xl);
  padding: var(--space-lg);
  border-left: 2px solid var(--accent-purple);
  background: rgba(139, 92, 246, 0.06);
  border-radius: 0 10px 10px 0;
}

.chapter-bridge .bridge-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-purple-text);
  margin-bottom: var(--space-xs);
}

.chapter-bridge p {
  margin: 0;
  color: var(--text-primary);
}

/* --- Screen-reader-only text (diagram alternatives) --- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Version note (aside for readers on older toolchains) --- */
.version-note {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid rgba(148, 163, 184, 0.35);
  font-size: var(--font-size-base);
  color: var(--text-muted);
}

.version-note strong {
  color: var(--text-secondary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .exercise-header,
  .exercise-body {
    padding: var(--space-md);
  }


}

/* --- Resume prompt (reading progress) --- */
.resume-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  max-width: min(560px, calc(100vw - 32px));
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.resume-bar button {
  padding: 7px 12px;
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

.resume-bar .resume-go {
  color: var(--bg-deep);
  background: var(--accent-cyan);
  font-weight: 600;
}

.resume-bar .resume-dismiss {
  color: var(--text-secondary);
  background: transparent;
  border-color: rgba(148, 163, 184, 0.3);
}

.resume-bar button:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}

@media print {
  .resume-bar {
    display: none !important;
  }
}

/* --- Nested ToC: only the section you are reading expands --- */
.sidebar-toc-list .toc-section > .toc-sub {
  display: none;
}

.sidebar-toc-list .toc-section.is-active > .toc-sub {
  display: block;
}

.sidebar-toc-list .toc-section.is-active > a {
  color: var(--text-heading);
  font-weight: 600;
}

.sidebar-toc-list .toc-section > a.active {
  background: rgba(6, 182, 212, 0.12);
}

/* --- Resume prompt: reserve its space --------------------------------
   The bar is position:fixed at the bottom, so it used to sit on top of the
   last two lines of copy while shown. Pad the container while it is up. */
body:has(.resume-bar) .book-container {
  padding-bottom: calc(var(--space-3xl) + 96px);
}

@supports not (selector(:has(*))) {
  .resume-bar ~ * .book-container {
    padding-bottom: calc(var(--space-3xl) + 96px);
  }
}

/* --- Scrollbars on scrollable content --------------------------------
   Only .sidebar-toc was themed, so an overflowing code block rendered a
   bright light-grey bar against the dark page — 3 of 124 blocks at desktop
   but 123 of 159 at 400px, i.e. nearly every listing on a phone. */
pre,
.ascii-diagram,
.code-block pre,
.output-block .terminal-body,
.info-cards{
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 182, 212, 0.35) transparent;
}

pre::-webkit-scrollbar,
.ascii-diagram::-webkit-scrollbar,
.output-block .terminal-body::-webkit-scrollbar,
.info-cards::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}

pre::-webkit-scrollbar-track,
.ascii-diagram::-webkit-scrollbar-track,
.output-block .terminal-body::-webkit-scrollbar-track,
.info-cards::-webkit-scrollbar-track {
  background: transparent;
}

pre::-webkit-scrollbar-thumb,
.ascii-diagram::-webkit-scrollbar-thumb,
.output-block .terminal-body::-webkit-scrollbar-thumb,
.info-cards::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 4px;
}

pre::-webkit-scrollbar-thumb:hover,
.ascii-diagram::-webkit-scrollbar-thumb:hover,
.output-block .terminal-body::-webkit-scrollbar-thumb:hover,
.info-cards::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.55);
}

/* ============================================
   SITE HEADER IN THE BOOK
   ============================================
   Chapters previously had no site chrome at all — a reader arriving from
   search had no way back to corebackend.dev. This is the same header the
   rest of the site uses, rebuilt with self-contained classes rather than
   Tailwind utilities, so the chapters keep exactly one stylesheet and the
   utility classes can't collide with the book's own CSS. */

/* NOT fixed. A chapter is 68,000-155,000px of continuous reading, and a
   pinned 80px bar costs ~9% of a laptop viewport on every single screenful
   to serve a need that occurs exactly twice: on arrival and on leaving.
   So it sits at the top of the flow and scrolls away, and the site footer
   at the foot of the chapter answers "where next". The scroll-to-top button
   brings it back in one click. */
.site-header {
  position: relative;
  z-index: 55;
  height: 80px;
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.site-header-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* --- Brand --- */
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.site-brand:hover {
  transform: scale(1.05);
}

.site-brand img {
  width: 40px;
  height: 40px;
}

.site-brand-name {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* --- Links --- */
.site-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.site-nav-link {
  position: relative;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-cyan),
    transparent
  );
  transform: scaleX(0);
  transform-origin: bottom center;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.site-nav-link:hover {
  color: var(--accent-cyan);
}

.site-nav-link:hover::after,
.site-nav-link[data-active='true']::after {
  transform: scaleX(1);
}

.site-nav-sep {
  width: 1px;
  height: 20px;
  background: rgba(148, 163, 184, 0.2);
  margin: 0 8px;
}

.site-nav-corelabs {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-nav-corelabs:hover,
.site-nav-corelabs[aria-current='page'] {
  color: var(--accent-cyan);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #67e8f9;
  text-decoration: none;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.25);
  transition: all 0.4s ease;
  white-space: nowrap;
}

.site-cta:hover {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15);
}

.site-cta svg {
  width: 16px;
  height: 16px;
}

.site-header a:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

/* Under ~900px the middle links would crowd the wordmark. The chapter
   already has its own bottom-right drawer for in-page navigation, so a
   second hamburger would compete with it — the brand and the CTA are
   enough to get back to the site from here. */
@media (max-width: 900px) {
  .site-header {
    height: 68px;
  }
  .site-nav-links {
    gap: 0;
  }
  .site-nav-link,
  .site-nav-sep {
    display: none;
  }
  .site-brand img {
    width: 32px;
    height: 32px;
  }
  .site-brand-name {
    font-size: 1.25rem;
  }
  .site-cta {
    padding: 8px 14px;
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .site-cta span {
    display: none;
  }
  .site-cta {
    padding: 8px 12px;
  }
}

@media print {
  .site-header {
    display: none !important;
  }
}

/* --- Site footer ------------------------------------------------------
   The other half of "how do I get back to the site". The header is only
   on screen at the start; this is here when the reader actually finishes. */
.site-footer {
  position: relative;
  z-index: 2;
  margin-top: var(--space-3xl);
  padding: var(--space-3xl) var(--space-lg);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  text-align: center;
}

.site-footer img {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-lg);
}

.site-footer-tagline {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-xl);
  background: linear-gradient(90deg, #22d3ee, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-xl);
  font-size: var(--font-size-sm);
}

.site-footer-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
  color: var(--accent-cyan);
}

.site-footer-legal {
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

@media print {
  .site-footer {
    display: none !important;
  }
}