:root {
    --black: #0a0a0a;
    --dark: #111111;
    --dark-card: #1a1a1a;
    --warm-white: #f5f0eb;
    --warm-light: #ede8e3;
    --warm-mid: #c8c0b8;
    --accent: #d4a853;
    --accent-dim: #8a6a2a;
    --accent-blue: #6496ff;
    --accent-green: #96d896;
    --accent-red: #e87878;
    --text-dark: #1a1614;
    --text-body: #2d2a27;
    --text-muted: #7a7570;
    --mono: 'DM Mono', monospace;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'DM Sans', sans-serif;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; scrollbar-gutter: stable; }
  body {
    background: var(--warm-white);
    color: var(--text-body);
    font-family: var(--sans);
    font-weight: 300;
    line-height: 1.8;
    overflow-x: hidden;
  }

  .book-nav {
    background: var(--black);
    color: white;
    padding: 14px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .book-title { font-family: var(--serif); font-size: 14px; letter-spacing: 0.02em; }
  .book-title em { color: var(--accent); font-style: italic; }
  .book-progress { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.4); letter-spacing: 0.1em; }

  .part-opener {
    background: var(--black); color: white;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 40px; text-align: center; position: relative; overflow: hidden;
    margin-top: 48px;
  }
  .part-opener::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(212,168,83,0.08) 0%, transparent 60%); }
  .part-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.3em; color: var(--accent); text-transform: uppercase; margin-bottom: 32px; position: relative; }
  .part-opener h1 { font-family: var(--serif); font-size: clamp(3rem, 7vw, 6rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1; margin-bottom: 32px; position: relative; }
  .part-opener h1 em { font-style: italic; color: var(--accent); }
  .part-tagline { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: rgba(255,255,255,0.6); max-width: 720px; line-height: 1.6; position: relative; margin-bottom: 80px; }
  .part-toc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 720px; width: 100%; position: relative; }
  .toc-card { background: var(--dark-card); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 28px; text-align: left; transition: all 0.2s; cursor: pointer; text-decoration: none; color: inherit; }
  .toc-card:hover { border-color: rgba(212,168,83,0.4); transform: translateY(-2px); }
  .toc-num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 12px; }
  .toc-title { font-family: var(--serif); font-size: 1.2rem; color: white; margin-bottom: 12px; line-height: 1.3; }
  .toc-desc { font-size: 0.85rem; color: rgba(255,255,255,0.4); line-height: 1.6; }

  .chapter-hero { background: var(--black); color: white; min-height: 90vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; overflow: hidden; }
  .chapter-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(212,168,83,0.08) 0%, transparent 60%); }
  .chapter-hero-text { padding: 80px 60px 80px 80px; position: relative; z-index: 2; }
  .chapter-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; margin-bottom: 32px; display: flex; align-items: center; gap: 12px; }
  .chapter-label::before { content: ''; width: 32px; height: 1px; background: var(--accent); }
  .chapter-hero h1 { font-family: var(--serif); font-size: clamp(2.5rem, 5vw, 4.2rem); font-weight: 400; line-height: 1.1; margin-bottom: 24px; letter-spacing: -0.02em; }
  .chapter-hero h1 em { font-style: italic; color: var(--accent); }
  .chapter-subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.55); max-width: 480px; line-height: 1.7; margin-bottom: 48px; }
  .chapter-meta { display: flex; gap: 40px; flex-wrap: wrap; }
  .meta-item { display: flex; flex-direction: column; gap: 4px; }
  .meta-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; color: rgba(255,255,255,0.3); text-transform: uppercase; }
  .meta-value { font-family: var(--mono); font-size: 13px; color: rgba(255,255,255,0.7); }
  .chapter-hero-visual { position: relative; height: 90vh; display: flex; align-items: center; justify-content: center; }

  .chapter-nav { background: var(--dark); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 0 80px; display: flex; align-items: center; overflow-x: auto; position: sticky; top: 48px; z-index: 100; }
  .nav-item { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); padding: 18px 20px; cursor: pointer; transition: color 0.2s; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .nav-item:hover, .nav-item.active { color: var(--accent); border-bottom-color: var(--accent); }

  .content { max-width: 800px; margin: 0 auto; padding: 100px 40px; }
  .section { margin-bottom: 100px; }
  .section-number { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); text-transform: uppercase; margin-bottom: 16px; }
  h2 { font-family: var(--serif); font-size: 2.4rem; font-weight: 400; color: var(--text-dark); line-height: 1.2; margin-bottom: 32px; letter-spacing: -0.02em; }
  h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; font-style: italic; color: var(--text-dark); margin: 56px 0 20px; }
  h4 { font-family: var(--sans); font-weight: 500; font-size: 1.05rem; color: var(--text-dark); margin: 32px 0 12px; letter-spacing: 0.02em; }
  p { font-size: 1.05rem; color: var(--text-body); margin-bottom: 20px; }
  p em { font-style: italic; }
  p strong { font-weight: 500; color: var(--text-dark); }

  .lead { font-family: var(--serif); font-size: 1.35rem; line-height: 1.6; color: var(--text-dark); margin-bottom: 32px; font-weight: 400; }
  .lead::first-letter { font-family: var(--serif); font-size: 4rem; float: left; line-height: 0.85; margin: 8px 12px 0 0; color: var(--accent); }

  .pull-quote { border-left: 3px solid var(--accent); padding: 24px 32px; margin: 48px 0; background: var(--warm-light); border-radius: 0 8px 8px 0; }
  .pull-quote p { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--text-dark); margin: 0; line-height: 1.6; }
  .pull-quote .attr { display: block; margin-top: 12px; font-family: var(--mono); font-size: 11px; font-style: normal; color: var(--text-muted); letter-spacing: 0.05em; }

  .diagram-card { background: var(--dark); border-radius: 16px; padding: 48px; margin: 48px 0; position: relative; overflow: hidden; }
  .diagram-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,83,0.06) 0%, transparent 60%); }
  .diagram-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.3); text-transform: uppercase; margin-bottom: 32px; position: relative; z-index: 1; }
  .diagram-caption { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 24px; position: relative; z-index: 1; line-height: 1.7; }
  .diagram-card svg { position: relative; z-index: 1; width: 100%; height: auto; }

  .light-diagram { background: var(--warm-light); border-radius: 16px; padding: 48px; margin: 48px 0; border: 1px solid rgba(0,0,0,0.05); }
  .light-diagram .diagram-label { color: var(--text-muted); }
  .light-diagram .diagram-caption { color: var(--text-muted); }

  .timeline { position: relative; padding-left: 32px; margin: 48px 0; }
  .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, var(--accent), transparent); }
  .timeline-item { position: relative; margin-bottom: 40px; padding-left: 24px; }
  .timeline-item::before { content: ''; position: absolute; left: -38px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(212,168,83,0.4); }
  .timeline-year { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 6px; }
  .timeline-title { font-family: var(--serif); font-size: 1.1rem; color: var(--text-dark); margin-bottom: 8px; }
  .timeline-text { font-size: 0.95rem; color: var(--text-muted); }

  .code-block { background: var(--dark); border-radius: 12px; padding: 32px; margin: 32px 0; overflow-x: auto; position: relative; }
  .code-lang { position: absolute; top: 12px; right: 16px; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.25); letter-spacing: 0.1em; text-transform: uppercase; }
  .code-block pre { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.78); white-space: pre; }
  .code-block .kw { color: #d4a853; }
  .code-block .cm { color: rgba(255,255,255,0.35); font-style: italic; }
  .code-block .st { color: #a8d8a0; }
  .code-block .nm { color: #89b4e0; }
  .code-block .op { color: #e0a0c8; }

  .concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px 0; }
  .concept-grid.three { grid-template-columns: repeat(3, 1fr); }
  .concept-grid.four { grid-template-columns: repeat(4, 1fr); }
  .concept-card { background: var(--warm-light); border-radius: 12px; padding: 28px; border: 1px solid rgba(0,0,0,0.06); transition: transform 0.2s; }
  .concept-card:hover { transform: translateY(-2px); }
  .concept-icon { font-size: 24px; margin-bottom: 12px; color: var(--accent-dim); }
  .concept-title { font-family: var(--serif); font-size: 1rem; color: var(--text-dark); margin-bottom: 8px; }
  .concept-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

  .key-term { background: var(--dark); color: var(--accent); font-family: var(--mono); font-size: 0.85em; padding: 2px 8px; border-radius: 4px; display: inline-block; margin: 0 2px; }
  code { background: var(--warm-light); color: var(--text-dark); font-family: var(--mono); font-size: 0.88em; padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.05); }

  .insight-strip { background: var(--dark); border-radius: 12px; padding: 24px 32px; margin: 40px 0; display: flex; align-items: flex-start; gap: 20px; }
  .insight-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; color: var(--accent); }
  .insight-text { font-size: 0.95rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0; }
  .insight-text strong { color: var(--accent); font-weight: 400; }

  .math-callout { background: linear-gradient(135deg, var(--warm-light), #f0ead8); border-left: 3px solid #b8924a; border-radius: 0 12px 12px 0; padding: 24px 32px; margin: 40px 0; }
  .math-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--accent-dim); text-transform: uppercase; margin-bottom: 12px; }
  .math-callout p { margin: 0 0 8px 0; font-size: 0.98rem; }
  .math-callout p:last-child { margin-bottom: 0; }
  .math-formula { font-family: var(--serif); font-style: italic; text-align: center; font-size: 1.4rem; color: var(--text-dark); margin: 16px 0; }

  .divider { width: 60px; height: 1px; background: var(--accent); margin: 80px auto; opacity: 0.4; }

  .chapter-end { background: var(--dark); color: white; padding: 80px 40px; text-align: center; margin-top: 80px; }
  .chapter-end h3 { font-family: var(--serif); font-size: 2rem; font-style: normal; color: white; margin-bottom: 16px; }
  .chapter-end p { color: rgba(255,255,255,0.5); max-width: 580px; margin: 0 auto 40px; }
  .next-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: var(--black); padding: 14px 28px; border-radius: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: opacity 0.2s; }
  .next-btn:hover { opacity: 0.85; }

  .summary-table { width: 100%; border-collapse: collapse; margin: 32px 0; font-size: 0.95rem; }
  .summary-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.1); }
  .summary-table td { padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,0.05); color: var(--text-body); vertical-align: top; }
  .summary-table tr:last-child td { border-bottom: none; }
  .summary-table td:first-child { font-family: var(--mono); font-size: 12px; color: var(--accent-dim); white-space: nowrap; }
  .summary-table.dark { background: var(--dark); border-radius: 12px; padding: 12px; }
  .summary-table.dark th, .summary-table.dark td { color: rgba(255,255,255,0.7); }
  .summary-table.dark th { color: rgba(255,255,255,0.4); border-bottom-color: rgba(255,255,255,0.1); }
  .summary-table.dark td { border-bottom-color: rgba(255,255,255,0.05); }

  .truth-table { background: var(--warm-light); border-radius: 12px; padding: 28px; margin: 32px 0; display: inline-block; border: 1px solid rgba(0,0,0,0.05); }
  .truth-table h4 { margin-top: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-dim); }
  .truth-table table { border-collapse: collapse; font-family: var(--mono); font-size: 14px; }
  .truth-table th, .truth-table td { padding: 8px 16px; text-align: center; border: 1px solid rgba(0,0,0,0.1); }
  .truth-table th { background: rgba(0,0,0,0.04); font-weight: 500; color: var(--text-dark); }
  .truth-table .out { color: var(--accent-dim); font-weight: 500; }

  .table-row { display: flex; gap: 24px; flex-wrap: wrap; margin: 32px 0; }

  .bit-row { display: inline-flex; gap: 4px; margin: 16px 0; font-family: var(--mono); }
  .bit { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 14px; font-weight: 500; }
  .bit.on { background: var(--accent); color: var(--black); }
  .bit.off { background: var(--dark-card); color: rgba(255,255,255,0.3); border: 1px solid rgba(255,255,255,0.1); }

  .process-flow { display: flex; align-items: center; gap: 16px; margin: 32px 0; flex-wrap: wrap; }
  .process-step { flex: 1; min-width: 140px; background: var(--dark); color: white; padding: 20px; border-radius: 8px; text-align: center; border: 1px solid rgba(212,168,83,0.2); }
  .step-num { font-family: var(--mono); font-size: 10px; color: var(--accent); letter-spacing: 0.2em; margin-bottom: 8px; }
  .step-title { font-family: var(--serif); font-size: 1rem; margin-bottom: 6px; }
  .step-desc { font-size: 0.8rem; color: rgba(255,255,255,0.5); line-height: 1.5; }
  .arrow { color: var(--accent); font-size: 20px; }

  .memory-diagram { background: var(--dark); border-radius: 12px; padding: 24px; margin: 32px 0; font-family: var(--mono); font-size: 12px; }
  .memory-row { display: grid; grid-template-columns: 80px 1fr 100px; gap: 12px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
  .memory-row:last-child { border-bottom: none; }
  .memory-row .addr { color: var(--accent); }
  .memory-row .val { color: white; }
  .memory-row .desc { color: rgba(255,255,255,0.4); font-style: italic; text-align: right; }

  .section-intro { font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--text-muted); line-height: 1.6; margin: 0 0 32px 0; padding: 0 0 0 24px; border-left: 2px solid var(--accent-dim); max-width: 680px; }

  /* Visual additions — kept in the same vocabulary as everything above */
  .diagram-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 48px 0; }
  .diagram-card.tall svg { min-height: 280px; }
  .scale-shock { background: var(--dark); border-radius: 16px; padding: 48px 40px; margin: 48px 0; position: relative; overflow: hidden; }
  .scale-shock::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(212,168,83,0.06) 0%, transparent 60%); }
  .scale-shock .diagram-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.3); text-transform: uppercase; margin-bottom: 32px; position: relative; z-index: 1; }
  .scale-shock svg { width: 100%; height: auto; position: relative; z-index: 1; }
  .scale-shock .diagram-caption { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 24px; position: relative; z-index: 1; line-height: 1.7; }

  /* SMIL-style flowing dashes for buses, wires, signals */
  @keyframes dashflow { to { stroke-dashoffset: -24; } }
  .flow-dash { stroke-dasharray: 6 4; animation: dashflow 1.4s linear infinite; }
  .flow-dash-slow { stroke-dasharray: 6 4; animation: dashflow 2.6s linear infinite; }
  .flow-dash-rev { stroke-dasharray: 6 4; animation: dashflow 1.6s linear infinite reverse; }

  /* Subtle reading-rhythm details — scroll-driven, opt-in via @supports.
     Browsers without scroll-driven animations just see the static, fully visible state. */
  @supports (animation-timeline: view()) {
    .diagram-card, .light-diagram, .scale-shock, .math-callout, .pull-quote {
      animation: scrollFade 1s ease-out both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    .section-number {
      position: relative;
    }
    .section-number::after {
      content: '';
      position: absolute;
      left: 0; bottom: -10px;
      width: 0; height: 1px;
      background: var(--accent);
      animation: drawStripe 0.9s ease-out both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    h3 {
      background-image: linear-gradient(to right, rgba(212,168,83,0.5), rgba(212,168,83,0));
      background-position: 0 calc(100% - 4px);
      background-repeat: no-repeat;
      background-size: 0% 1px;
      animation: drawUnderline 1.1s ease-out both;
      animation-timeline: view();
      animation-range: entry 15% entry 55%;
    }
  }
  @keyframes scrollFade {
    from { opacity: 0.35; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes drawStripe {
    to { width: 48px; }
  }
  @keyframes drawUnderline {
    to { background-size: 50% 1px; }
  }

  /* Marginal "live" indicator — a tiny pulsing dot beside each section number */
  .section-number {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .section-number::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px rgba(212,168,83,0.5);
    animation: livePulse 2.4s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1; transform: scale(1.15); }
  }

  /* Diagram-card hover lift — subtle, doesn't distract during reading.
     Disabled when the card is in fullscreen — that bar should not move on hover. */
  .diagram-card, .light-diagram {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }
  .diagram-card:not(.is-fullscreen):hover,
  .light-diagram:not(.is-fullscreen):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.25);
  }

  /* === Glass text reveal for h2 ===
     Headings appear as if forming out of clear glass — chromatic aberration on entry,
     a faint memory of refraction at rest. Pure CSS, scroll-driven. */
  @supports (animation-timeline: view()) {
    h2 {
      animation: glassReveal 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
      animation-timeline: view();
      animation-range: entry 5% entry 65%;
    }
  }
  @keyframes glassReveal {
    0% {
      opacity: 0;
      color: rgba(26, 22, 20, 0);
      text-shadow:
        -5px 0 0 rgba(255, 110, 180, 0.55),
         5px 0 0 rgba(110, 200, 255, 0.55),
        -3px 1px 0 rgba(255, 140, 100, 0.35),
         3px -1px 0 rgba(110, 220, 255, 0.35),
         0 0 32px rgba(212, 168, 83, 0.4);
      transform: translateY(30px) scale(1.045);
      letter-spacing: 0.005em;
      filter: blur(0.5px);
    }
    45% {
      opacity: 0.85;
      color: rgba(26, 22, 20, 0.55);
      text-shadow:
        -2.5px 0 0 rgba(255, 110, 180, 0.4),
         2.5px 0 0 rgba(110, 200, 255, 0.4),
        -1.5px 0.5px 0 rgba(255, 140, 100, 0.25),
         1.5px -0.5px 0 rgba(110, 220, 255, 0.25),
         0 0 18px rgba(212, 168, 83, 0.18);
      transform: translateY(10px) scale(1.018);
      filter: blur(0.2px);
    }
    100% {
      opacity: 1;
      color: var(--text-dark);
      text-shadow:
        -0.6px 0 0 rgba(255, 110, 180, 0.08),
         0.6px 0 0 rgba(110, 200, 255, 0.08),
         0 0 0 rgba(212, 168, 83, 0);
      transform: translateY(0) scale(1);
      letter-spacing: -0.02em;
      filter: blur(0);
    }
  }

  /* === Fullscreen button on every diagram ===
     Sits at top-right of each diagram card. Click to expand; Escape, click outside, or close button to dismiss. */
  .fs-button {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 6px;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    z-index: 5;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .fs-button:hover {
    background: rgba(212,168,83,0.14);
    border-color: rgba(212,168,83,0.5);
    color: rgba(212,168,83,0.95);
    transform: scale(1.05);
  }
  .fs-button svg { width: 16px; height: 16px; display: block; }
  .light-diagram .fs-button {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: rgba(26,22,20,0.55);
  }
  .light-diagram .fs-button:hover {
    background: rgba(212,168,83,0.18);
    border-color: rgba(140,98,30,0.55);
    color: rgba(140,98,30,0.95);
  }

  /* Fullscreen state — diagram lifted out of flow with glass-edge frame.
     Flex column layout so the SVG fills available space and the diagram fits without scrolling. */
  .diagram-card.is-fullscreen,
  .light-diagram.is-fullscreen {
    position: fixed;
    inset: 4vh 4vw;
    width: auto;
    height: auto;
    max-width: none;
    max-height: 92vh;
    margin: 0;
    z-index: 1100;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 36px 44px 28px;
    /* Force a separate compositing layer + paint isolation so internal SMIL
       animations only invalidate the card, not the rainbow or backdrop. */
    will-change: transform;
    contain: layout paint;
    /* Chromatic glass edge — pink on one side, cyan on the other, gold inner outline */
    box-shadow:
      0 0 0 1px rgba(212, 168, 83, 0.45),
      -3px 0 18px rgba(255, 110, 180, 0.32),
       3px 0 18px rgba(110, 200, 255, 0.32),
       0 0 60px rgba(212, 168, 83, 0.15),
       0 40px 90px rgba(0, 0, 0, 0.75);
    animation: glassEdgeIn 0.55s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  .diagram-card.is-fullscreen .diagram-label,
  .light-diagram.is-fullscreen .diagram-label {
    flex-shrink: 0;
    margin-bottom: 20px;
  }
  .diagram-card.is-fullscreen svg,
  .light-diagram.is-fullscreen svg {
    flex: 1 1 0;
    width: 100%;
    max-width: 86%;
    height: 100%;
    min-height: 0;
    max-height: 92%;
    align-self: center;
    display: block;
  }
  /* Caption is reading-flow only — hidden in fullscreen so the diagram and
     its label own the space. The in-page card still shows it normally. */
  .diagram-card.is-fullscreen .diagram-caption,
  .light-diagram.is-fullscreen .diagram-caption {
    display: none;
  }
  @keyframes glassEdgeIn {
    0% {
      box-shadow:
        0 0 0 1px rgba(212, 168, 83, 0),
        0 0 0 rgba(255, 110, 180, 0),
        0 0 0 rgba(110, 200, 255, 0),
        0 20px 50px rgba(0, 0, 0, 0.3);
    }
    100% {
      box-shadow:
        0 0 0 1px rgba(212, 168, 83, 0.45),
        -3px 0 18px rgba(255, 110, 180, 0.32),
         3px 0 18px rgba(110, 200, 255, 0.32),
         0 0 60px rgba(212, 168, 83, 0.15),
         0 40px 90px rgba(0, 0, 0, 0.75);
    }
  }

  /* Backdrop — clear glass with very mild blur + slight saturation, NOT frosted */
  body.has-fullscreen { overflow: hidden; }
  body.has-fullscreen::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(10, 10, 10, 0.4);
    backdrop-filter: blur(2px) saturate(1.25) contrast(1.05);
    -webkit-backdrop-filter: blur(2px) saturate(1.25) contrast(1.05);
    animation: bdEnter 0.4s ease-out both;
  }
  @keyframes bdEnter {
    from { opacity: 0; backdrop-filter: blur(0) saturate(1) contrast(1); }
    to   { opacity: 1; backdrop-filter: blur(2px) saturate(1.25) contrast(1.05); }
  }

  /* === Liquid rainbow — outside the card, in the gap ===
     Two full-screen layers behind the card. The card (z-index 1100) sits on
     top, so the rainbow visually shows only in the ~4vh / 4vw gap around it,
     making the card look like an island floating in cool liquid.

     Layer 1 (.liquid-bg) — deep cool palette, pure CSS blur + saturate (fully
     GPU). The drift / breath animations move the gradients across the gap.
     Layer 2 (.liquid-bg::after) — second offset palette, also CSS-only,
     screen-blended on top of layer 1 for marbled crossings.
     SVG displacement was removed — it cost ~10 ms/frame on fullscreen, which
     starved the figure's internal SMIL animations of their frame budget. */
  .liquid-bg {
    position: fixed;
    inset: -6%;
    z-index: 1090; /* above .has-fullscreen::before (1080), below card (1100) */
    pointer-events: none;
    background:
      radial-gradient(ellipse 38% 48% at 12% 16%, rgba(125, 85, 215, 0.82), transparent 64%),
      radial-gradient(ellipse 36% 44% at 88% 22%, rgba(95, 205, 240, 0.78), transparent 64%),
      radial-gradient(ellipse 40% 42% at 90% 88%, rgba(145, 230, 195, 0.72), transparent 66%),
      radial-gradient(ellipse 38% 46% at 10% 90%, rgba(215, 130, 185, 0.70), transparent 66%),
      radial-gradient(ellipse 32% 26% at 50% 50%, rgba(185, 205, 245, 0.26), transparent 78%);
    background-size: 130% 130%, 125% 130%, 130% 125%, 125% 125%, 100% 100%;
    /* Pure CSS filter — fully GPU. No SVG displacement; the per-pixel
       sampling cost was eating the frame budget that figure SMIL animations
       need to run smoothly inside the fullscreen card. The rainbow still
       drifts, breathes, and marbles via screen-blend — just no warping. */
    filter: blur(40px) saturate(1.26);
    opacity: 0;
    visibility: hidden;
    will-change: opacity;
    contain: strict;
    /* No transition on the base style — when .liquid-active is removed, opacity
       and visibility snap to 0 instantly. The View Transition then snapshots a
       clean (rainbow-free) state, so close is immediate. The slow rise on enter
       is set inside .liquid-active below and only applies in that direction. */
    /* Drift + breath always running. Cheap while opacity is 0. */
    animation:
      liquidDriftA 21s 0s ease-in-out infinite alternate,
      liquidBreathA 31s 0s ease-in-out infinite alternate;
  }
  /* Slow, quiet rise on enter — the colours arrive together, not in stages. */
  body.liquid-active .liquid-bg {
    opacity: 1;
    visibility: visible;
    transition: opacity 3.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Apple-style bloom — soft warm flare in the centre as the colours arrive.
     Plays only while .liquid-active is on; CSS animation auto-restarts each
     time the class is added. */
  .liquid-bg::before {
    content: '';
    position: absolute;
    inset: 18%;
    background: radial-gradient(
      ellipse 60% 60% at 50% 50%,
      rgba(255, 255, 255, 0.22),
      rgba(255, 240, 220, 0.10) 38%,
      transparent 70%
    );
    filter: blur(48px);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
  }
  body.liquid-active .liquid-bg::before {
    animation: liquidBloom 2.6s 0s cubic-bezier(0.4, 0, 0.4, 1) forwards;
  }
  .liquid-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 34% 42% at 70% 8%,  rgba(160, 110, 230, 0.58), transparent 66%),
      radial-gradient(ellipse 38% 38% at 18% 52%, rgba(110, 220, 230, 0.56), transparent 64%),
      radial-gradient(ellipse 32% 42% at 82% 62%, rgba(180, 235, 200, 0.52), transparent 66%),
      radial-gradient(ellipse 36% 34% at 36% 94%, rgba(220, 145, 200, 0.50), transparent 68%);
    background-size: 130% 130%, 125% 130%, 130% 125%, 125% 130%;
    /* Pure CSS blur — fully GPU. The marbled feel comes from the screen-blend
       of this layer's drift against the SVG-warped layer below. */
    filter: blur(46px) saturate(1.16);
    mix-blend-mode: screen;
    /* Inherits opacity from parent, so it rises in lockstep — no own delay,
       no separate easing. Unified arrival. */
    animation:
      liquidDriftB 25s 0s ease-in-out infinite alternate,
      liquidBreathB 35s 0s ease-in-out infinite alternate;
  }
  /* Wide-amplitude sweeps so the colour fields actually flow across the gap.
     Periods 28 / 33 / 41 / 47 are incommensurate — visual never repeats. */
  @keyframes liquidDriftA {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    50%  { background-position: -14% 12%, 16% -10%, -10% -14%, 14% 10%, 4% -4%; }
    100% { background-position: 10% -8%, -12% 14%, 14% 8%, -10% -12%, -4% 6%; }
  }
  @keyframes liquidDriftB {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
    50%  { background-position: 12% -10%, -14% 12%, 10% 14%, -12% -8%; }
    100% { background-position: -10% 14%, 14% -8%, -14% -10%, 12% 14%; }
  }
  @keyframes liquidBreathA {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.04) rotate(0.5deg); }
  }
  @keyframes liquidBreathB {
    0%, 100% { transform: scale(1.02) rotate(0deg); }
    50%      { transform: scale(1) rotate(-0.4deg); }
  }
  /* Apple-style bloom: gentle rise, plateau, long fade. The peak is later
     and lower than before, so it reads as ambient warmth rather than a flash. */
  @keyframes liquidBloom {
    0%   { opacity: 0;     transform: scale(0.94); }
    32%  { opacity: 0.78;  transform: scale(1.04); }
    100% { opacity: 0;     transform: scale(1.32); }
  }

  @media (prefers-reduced-motion: reduce) {
    .liquid-bg, .liquid-bg::after {
      animation: none;
      transform: none;
      filter: blur(38px) saturate(1.1);
    }
  }

  /* Hide expand button when fullscreen, show close button */
  .fs-close {
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(212,168,83,0.45);
    border-radius: 8px;
    color: rgba(212, 168, 83, 0.95);
    cursor: pointer;
    z-index: 6;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
  }
  .fs-close:hover { background: rgba(212,168,83,0.2); transform: scale(1.06); }
  .fs-close svg { width: 18px; height: 18px; display: block; }
  .diagram-card.is-fullscreen .fs-button,
  .light-diagram.is-fullscreen .fs-button { display: none; }
  .diagram-card.is-fullscreen .fs-close,
  .light-diagram.is-fullscreen .fs-close { display: flex; }

  /* View Transitions — smooth morph from inline to fullscreen */
  @supports (view-transition-name: x) {
    .diagram-card.transitioning,
    .light-diagram.transitioning {
      view-transition-name: active-diagram;
    }
    ::view-transition-old(active-diagram),
    ::view-transition-new(active-diagram) {
      animation-duration: 0.5s;
      animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
    }
    /* Snappier morph on close — Apple's close transitions are short and direct.
       Activated by html.is-closing-fullscreen, set by exitFullscreen() in JS. */
    html.is-closing-fullscreen ::view-transition-old(active-diagram),
    html.is-closing-fullscreen ::view-transition-new(active-diagram) {
      animation-duration: 0.32s;
      animation-timing-function: cubic-bezier(0.4, 0, 0.4, 1);
    }
  }

  /* === Section progress rail (left margin) ===
     A thin vertical line with one tick per section in the current chapter.
     Active section glows gold; section name fades in on hover or when active.
     Hidden on tablets and below — desktop affordance only. */
  .section-rail {
    position: fixed;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 14px 0;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
  }
  .section-rail.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .section-rail::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(26, 22, 20, 0.14);
    transform: translateX(-50%);
  }
  .rail-tick {
    position: relative;
    display: flex;
    align-items: center;
    width: 30px;
    height: 36px;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .rail-tick::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 1px;
    background: rgba(26, 22, 20, 0.28);
    transform: translate(-50%, -50%);
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                height 0.35s ease,
                background-color 0.35s ease;
  }
  .rail-tick:hover::before {
    width: 18px;
    background: rgba(140, 98, 30, 0.7);
  }
  .rail-tick.active::before {
    width: 24px;
    height: 1.5px;
    background: var(--accent);
  }
  .rail-label {
    position: absolute;
    left: 100%;
    margin-left: 18px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(26, 22, 20, 0.5);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
    pointer-events: none;
  }
  .rail-tick:hover .rail-label {
    opacity: 0.85;
    transform: translateX(0);
  }
  .rail-tick.active .rail-label {
    opacity: 1;
    transform: translateX(0);
    color: var(--accent-dim);
  }
  body.has-fullscreen .section-rail { opacity: 0; pointer-events: none; }
  @media (max-width: 1100px) {
    .section-rail { display: none; }
  }

  @media (max-width: 768px) {
    .book-nav { padding: 14px 20px; }
    .chapter-hero { grid-template-columns: 1fr; }
    .chapter-hero-visual { display: none; }
    .chapter-hero-text { padding: 60px 32px; }
    .content { padding: 60px 24px; }
    .concept-grid, .concept-grid.three, .concept-grid.four { grid-template-columns: 1fr; }
    .chapter-nav { padding: 0 24px; top: 48px; }
    .part-toc { grid-template-columns: 1fr; }
    .process-flow { flex-direction: column; }
    .arrow { transform: rotate(90deg); }
    .diagram-grid-2 { grid-template-columns: 1fr; }
  }

  /* --- Glossary references and floating tooltip ------------------------------ */
  /* Hover (or focus) any defined term anywhere in the book to see its definition
     and a link back to where it was first introduced. The reference itself is
     marked only with a help-cursor and a faint dotted accent on hover — no
     visible underline at rest, so the prose stays clean. */
  .glossary-ref {
    cursor: help;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
  }
  .glossary-ref:hover,
  .glossary-ref:focus {
    text-decoration: underline dotted rgba(212, 168, 83, 0.55);
    text-underline-offset: 3px;
    outline: none;
  }

  .glossary-tip {
    position: absolute;
    z-index: 9000;
    max-width: 360px;
    padding: 14px 18px 12px;
    background: rgba(20, 18, 16, 0.97);
    color: rgba(245, 240, 230, 0.92);
    border: 1px solid rgba(212, 168, 83, 0.32);
    border-radius: 4px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: auto;
    display: none;
  }
  .glossary-tip.visible { opacity: 1; transform: translateY(0); }
  .glossary-tip.below { transform: translateY(4px); }
  .glossary-tip.below.visible { transform: translateY(0); }

  .glossary-tip-term {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .glossary-tip-def {
    font-family: var(--sans);
    font-size: 13px;
    color: rgba(245, 240, 230, 0.85);
    margin-bottom: 10px;
  }
  .glossary-tip-link {
    display: inline-block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-transform: uppercase;
    text-decoration: none;
    border-top: 1px solid rgba(212, 168, 83, 0.18);
    padding-top: 8px;
    margin-top: 2px;
    width: 100%;
    transition: color 0.2s ease;
  }
  .glossary-tip-link:hover { color: rgba(245, 220, 170, 1); }

  /* --- Glossary index page --------------------------------------------------- */
  .glossary-page {
    background: var(--black);
    color: rgba(245, 240, 230, 0.9);
    min-height: 100vh;
    padding: 100px 40px 80px;
  }
  .glossary-page-inner {
    max-width: 880px;
    margin: 0 auto;
  }
  .glossary-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.35em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .glossary-title {
    font-family: var(--serif);
    font-size: clamp(2.6rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: rgba(245, 240, 230, 0.96);
  }
  .glossary-title em { font-style: italic; color: var(--accent); }
  .glossary-intro {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(245, 240, 230, 0.62);
    max-width: 640px;
    line-height: 1.55;
    margin-bottom: 16px;
  }
  .glossary-count {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(245, 240, 230, 0.4);
    text-transform: uppercase;
    margin-bottom: 60px;
    display: inline-block;
  }
  .glossary-back {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 60px;
    transition: color 0.2s ease;
  }
  .glossary-back:hover { color: rgba(245, 220, 170, 1); }

  .glossary-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px 0;
    border-top: 1px solid rgba(212, 168, 83, 0.12);
    border-bottom: 1px solid rgba(212, 168, 83, 0.12);
    margin-bottom: 60px;
    position: sticky;
    top: 0;
    background: var(--black);
    z-index: 100;
  }
  .glossary-jump a {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(245, 240, 230, 0.45);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 3px;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .glossary-jump a:hover {
    color: var(--accent);
    background: rgba(212, 168, 83, 0.08);
  }

  .glossary-group { margin-bottom: 64px; scroll-margin-top: 80px; }
  .glossary-letter {
    font-family: var(--serif);
    font-size: 3rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 32px;
    border-bottom: 1px solid rgba(212, 168, 83, 0.18);
    padding-bottom: 14px;
  }
  .glossary-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  @media (min-width: 760px) {
    .glossary-list { grid-template-columns: 1fr 1fr; gap: 32px 56px; }
  }
  .glossary-entry-anchor {
    display: block;
    text-decoration: none;
    color: inherit;
    border-left: 1px solid rgba(212, 168, 83, 0.14);
    padding-left: 18px;
    transition: border-left-color 0.25s ease;
  }
  .glossary-entry-anchor:hover {
    border-left-color: var(--accent);
  }
  .glossary-entry-term {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .glossary-entry-def {
    font-family: var(--sans);
    font-size: 14px;
    color: rgba(245, 240, 230, 0.78);
    line-height: 1.6;
    margin-bottom: 10px;
  }
  .glossary-entry-loc {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.2em;
    color: rgba(245, 240, 230, 0.42);
    text-transform: uppercase;
    transition: color 0.2s ease;
  }
  .glossary-entry-anchor:hover .glossary-entry-loc { color: var(--accent); }

  .glossary-footer-link {
    display: inline-block;
    margin-top: 24px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 1px solid rgba(212, 168, 83, 0.25);
    border-radius: 3px;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }
  .glossary-footer-link:hover {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.5);
    color: rgba(245, 220, 170, 1);
  }

  /* --- Resume reading card (index page only) --------------------------------- */
  .resume-card {
    display: flex;
    align-items: center;
    gap: 22px;
    max-width: 820px;
    margin: 60px auto 80px;
    padding: 18px 26px;
    background: rgba(212, 168, 83, 0.04);
    border: 1px solid rgba(212, 168, 83, 0.18);
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    opacity: 0;
    transform-origin: center top;
    transform: perspective(1200px) translateY(-14px) rotateX(-10deg);
    transition: opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease, border-color 0.3s ease;
    will-change: transform, opacity;
  }
  .resume-card.visible {
    opacity: 1;
    transform: perspective(1200px) translateY(0) rotateX(0);
  }
  .resume-card:hover {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.32);
  }
  .resume-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: rgba(212, 168, 83, 0.7);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .resume-body {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex: 1;
    min-width: 0;
  }
  .resume-meta {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.42);
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .resume-title {
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--accent);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .resume-arrow {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--accent);
    transition: transform 0.3s ease;
    flex-shrink: 0;
  }
  .resume-card:hover .resume-arrow { transform: translateX(4px); }
  .resume-dismiss {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.3);
    font-family: var(--mono);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    margin-left: 8px;
    transition: color 0.2s ease;
    flex-shrink: 0;
  }
  .resume-dismiss:hover { color: rgba(255, 255, 255, 0.75); }
  @media (max-width: 640px) {
    .resume-card {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      padding: 16px 20px;
      margin: 40px 24px 60px;
    }
    .resume-card .resume-arrow { display: none; }
    .resume-card .resume-dismiss {
      position: absolute;
      top: 8px;
      right: 8px;
      margin-left: 0;
    }
    .resume-card { position: relative; }
  }

  /* --- Scroll-reveal entrance animation --------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 580ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 580ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal.revealed {
    opacity: 1;
    transform: none;
  }

  /* Honor the OS-level "reduce motion" preference for CSS animations and transitions.
     SMIL animations inside SVG are handled separately in book.js — the CSS
     media query has no effect on SMIL, so the pauseAnimations() path is needed too. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Print stylesheet. Optimized for "Save as PDF" and physical print.
     Strategy: keep figure cards dark (the SVGs were designed for dark
     backgrounds; flipping them to white makes much of the inline text
     invisible). Force background printing with print-color-adjust: exact
     so dark figures actually render in PDF/paper output. Hide interactive
     UI (nav rails, fullscreen buttons, colophon). Add page breaks so
     chapters and figures don't split awkwardly. */
  @media print {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .liquid-bg { display: none !important; }
    .book-nav, .chapter-nav, .section-rail, .fs-button, .fs-close, .cover-cta { display: none !important; }
    .colophon { display: none !important; }
    .resume-card { display: none !important; }
    .glossary-tip { display: none !important; }
    .glossary-jump { display: none !important; }
    .glossary-ref { cursor: text !important; text-decoration: none !important; }

    @page {
      margin: 1.6cm 1.8cm;
      size: A4;
    }

    body {
      background: white !important;
      color: black !important;
      font-size: 10.5pt;
      line-height: 1.55;
    }
    p, li { font-size: 10.5pt; orphans: 3; widows: 3; }
    h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid; }

    /* Cover and chapter heroes — keep visual identity, allow color to print. */
    .part-opener, .chapter-hero {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      page-break-before: always;
      break-before: page;
      min-height: auto !important;
      padding: 32px 24px !important;
    }
    .part-opener h1, .chapter-hero h1 { font-size: 28pt !important; }
    .chapter-hero { grid-template-columns: 1fr !important; }
    .chapter-hero-visual { display: none !important; }

    /* Force backgrounds to print on figure/code/callout cards.
       Without these declarations the browser strips backgrounds by default,
       which would make many figures unreadable. */
    .diagram-card, .light-diagram, .code-block,
    .pull-quote, .math-callout, .insight-strip {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
      page-break-inside: avoid;
      break-inside: avoid;
      margin: 24px 0;
    }
    .diagram-card, .code-block { padding: 24px; }

    .diagram-label { page-break-after: avoid; break-after: avoid; }
    .diagram-card svg, .light-diagram svg {
      max-width: 100%;
      height: auto;
      page-break-inside: avoid;
    }

    /* Section spacing tighter for print. */
    .section { margin-bottom: 40pt; }
    .content { padding: 0; max-width: 100%; }

    /* Anchor links: don't show URLs after every link — would clutter. The
       book is meant to be readable on paper without the URL noise; readers
       who want to follow a link have the digital version. */
    a, a:link, a:visited { color: black; text-decoration: underline; }

    /* Avoid printing the closing "End of the Book" hero as a giant blank
       second page if it falls awkwardly. */
    section[class*="part-opener"]:last-of-type {
      page-break-before: auto;
      break-before: auto;
    }
  }

  /* Colophon — only at the very end of Ch 18.
     Closed by default; the book is anonymous to anyone who doesn't actively dig.
     A reader who clicks "colophon" sees two glassmorphism panels — Author and
     Publisher. The glassmorphism is deliberate: it bridges the visual language
     of atheric.eu (parent site) into under.atheric.eu (book). */
  .colophon {
    max-width: 880px;
    margin: 80px auto 60px;
    padding-top: 48px;
    border-top: 1px solid rgba(0,0,0,0.06);
    text-align: center;
  }
  .colophon summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 16px;
    display: inline-block;
    transition: color 0.25s, letter-spacing 0.25s;
    user-select: none;
  }
  .colophon summary::-webkit-details-marker { display: none; }
  .colophon summary::marker { display: none; content: ''; }
  .colophon summary:hover { color: var(--accent); letter-spacing: 0.35em; }
  .colophon[open] summary { color: var(--accent); }

  .colophon-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 36px auto 0;
    max-width: 880px;
    opacity: 0;
    transform: translateY(12px);
    animation: colophon-fade-in 0.55s 0.05s ease-out forwards;
  }
  @keyframes colophon-fade-in {
    to { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 700px) {
    .colophon-grid { grid-template-columns: 1fr; }
  }
  .colophon-pane {
    position: relative;
    padding: 32px 32px 28px;
    text-align: left;
    background: rgba(255, 252, 247, 0.55);
    border: 1px solid rgba(212, 168, 83, 0.18);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow:
      0 8px 32px rgba(26, 22, 20, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .colophon-pane:hover {
    transform: translateY(-2px);
    box-shadow:
      0 16px 40px rgba(26, 22, 20, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border-color: rgba(212, 168, 83, 0.32);
  }
  .colophon-pane__role {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 14px;
  }
  .colophon-pane__name {
    font-family: var(--serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 14px;
    line-height: 1.2;
  }
  .colophon-pane__note {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.7;
    margin-bottom: 22px;
  }
  .colophon-pane__legal {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.05em;
  }
  .colophon-pane__links {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.05em;
  }
  .colophon-pane__links a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(212,168,83,0.3);
    transition: border-color 0.2s, color 0.2s;
    padding-bottom: 1px;
  }
  .colophon-pane__links a:hover {
    color: var(--accent-dim);
    border-bottom-color: var(--accent);
  }