/* === TOKENS === */
    :root {
      --bg: #FAFAF8;
      --bg-card: #FFFFFF;
      --bg-sunken: #F4F3F9;
      --text: #1A1A2E;
      --text-muted: #5C5C7A;
      --accent: #3B4DA3;          /* deep indigo */
      --accent-dark: #2C3A85;
      --accent-light: #E6E9F5;
      --accent-secondary: #E07856; /* warm coral — the "leap" */
      --accent-secondary-light: #FBEAE2;

      /* light code theme — every code surface uses these (never dark) */
      --code-bg: #EEF2F5;          /* cool light surface, distinct from --bg */
      --code-bg-soft: #E1E7EC;     /* tab bar / chips */
      --code-border: #D3DAE0;
      --code-fg: #1F2533;          /* near-black code text */
      --code-cm: #7A8590;          /* comment */
      --code-kw: #9C2D6E;          /* keyword (magenta) */
      --code-ty: #2D6E78;          /* type (teal) */
      --code-fn: #2F5FA3;          /* function / value name (blue) */
      --code-op: #B5552A;          /* operator (rust) */
      --code-st: #3B7A4B;          /* string / literal (green) */
      --warn: #D97706;
      --warn-light: #FDF1E0;
      --ok: #2D7D46;
      --ok-light: #E8F5EC;
      --err: #DC2626;
      --err-light: #FEE8E8;
      --grid-line: rgba(59, 77, 163, 0.07);
      --border: #E5E3EC;
      --shadow: rgba(40, 30, 90, 0.07);
      --radius: 0.75rem;
      --mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
    }

    /* === RESET === */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* === LAYOUT === */
    .container { max-width: 1040px; margin: 0 auto; padding: 0 1.5rem; }
    .wide { max-width: 1040px; }

    /* === HEADER === */
    header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(250, 250, 248, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid transparent;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    header.scrolled {
      border-bottom-color: var(--border);
      box-shadow: 0 1px 8px var(--shadow);
    }
    header .container {
      display: flex; align-items: center; justify-content: space-between;
      height: 56px; max-width: 1040px;
    }
    .wordmark {
      display: flex; align-items: center; gap: 0.5rem;
      font-weight: 600; font-size: 0.95rem; color: var(--text);
    }
    .wordmark:hover { text-decoration: none; }
    .wordmark .mk {
      width: 26px; height: 26px; border-radius: 7px;
      background: var(--accent); color: #fff;
      display: grid; place-items: center;
      font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
    }
    .wordmark span { opacity: 0.5; font-weight: 400; }
    header nav { display: flex; gap: 1.2rem; }
    header nav a {
      font-size: 0.85rem; color: var(--text-muted);
      transition: color 0.2s;
    }
    header nav a:hover { color: var(--accent); text-decoration: none; }
    /* scroll progress */
    .progress {
      position: absolute; left: 0; bottom: -1px; height: 2px;
      background: var(--accent); width: 0%;
      transition: width 0.1s linear;
    }

    /* === CHAPTER STRIP === */
    .ch-strip {
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .ch-strip::-webkit-scrollbar { display: none; }
    .ch-strip .container {
      display: flex; align-items: center; gap: 0.4rem;
      padding-top: 0.55rem; padding-bottom: 0.55rem;
      max-width: 1040px;
    }
    .ch-pill {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.78rem; color: var(--text-muted);
      padding: 0.32rem 0.7rem; border-radius: 999px;
      border: 1px solid var(--border); background: var(--bg-card);
      transition: all 0.15s ease-out;
      text-decoration: none;
      white-space: nowrap;
    }
    .ch-pill:hover { color: var(--accent-dark); border-color: var(--accent); text-decoration: none; }
    .ch-pill .ch-num {
      font-family: var(--mono); font-weight: 700; font-size: 0.7rem;
      color: var(--accent);
    }
    .ch-pill .ch-name { font-weight: 500; }
    .ch-pill.current {
      background: var(--accent); color: #fff;
      border-color: var(--accent);
    }
    .ch-pill.current .ch-num { color: rgba(255,255,255,0.75); }
    .ch-pill.current:hover { color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
    .ch-pill-soon {
      flex-shrink: 0;
      display: inline-flex; align-items: center; gap: 0.45rem;
      font-size: 0.78rem; color: var(--text-muted);
      padding: 0.32rem 0.7rem; border-radius: 999px;
      border: 1px dashed var(--border); background: transparent;
      white-space: nowrap; cursor: default;
    }
    .ch-pill-soon .ch-num { font-family: var(--mono); font-weight: 700; font-size: 0.7rem; color: var(--text-muted); }
    .ch-pill-soon .ch-name { font-weight: 500; opacity: 0.7; }
    .ch-divider {
      width: 12px; height: 1px; background: var(--border); flex-shrink: 0;
    }
    @media (max-width: 767px) {
      .ch-pill .ch-name, .ch-pill-soon .ch-name { display: none; }
      .ch-pill, .ch-pill-soon { padding: 0.28rem 0.5rem; }
      .ch-divider { width: 6px; }
    }

    /* === HERO === */
    .hero {
      padding: 4.5rem 0 3rem;
      text-align: center;
      position: relative;
      overflow: hidden;
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .hero::after {
      content: '';
      position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
      background: linear-gradient(transparent, var(--bg));
      pointer-events: none;
    }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-size: 0.72rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--accent-dark);
      background: var(--accent-light);
      padding: 0.35rem 0.8rem; border-radius: 999px;
      margin-bottom: 1.25rem;
      animation: fadeUp 0.6s ease-out both;
    }
    .hero-title {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 3rem; font-weight: 600;
      letter-spacing: -0.02em; line-height: 1.1;
      margin-bottom: 0.85rem;
      animation: fadeUp 0.6s ease-out 0.08s both;
    }
    .hero-title em { font-style: italic; color: var(--accent); }
    .hero-subtitle {
      font-size: 1.15rem; color: var(--text-muted);
      max-width: 560px; margin: 0 auto 2rem;
      animation: fadeUp 0.6s ease-out 0.16s both;
    }
    .hero-arrows { animation: fadeUp 0.6s ease-out 0.28s both; }
    /* Hero art is authored at a fixed px width (360–420). Without this it
       overflows narrow viewports and gets silently cropped by .hero's
       overflow:hidden instead of scaling. viewBox + height:auto keeps ratio. */
    .hero-arrows svg { max-width: 100%; height: auto; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* === SECTIONS === */
    section.lesson { padding: 1rem 0; }
    .block { margin: 2.75rem 0; }
    h2.sec {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em;
      margin-bottom: 0.4rem;
      scroll-margin-top: 72px;
    }
    h2.sec .num {
      font-family: var(--mono); font-size: 0.95rem; font-weight: 500;
      color: var(--accent); margin-right: 0.5rem;
      vertical-align: 0.12em;
    }
    h3.sub { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
    p.lead { font-size: 1.05rem; color: var(--text-muted); margin-bottom: 1rem; }
    .prose p { margin-bottom: 0.9rem; }
    .prose ul { margin: 0.4rem 0 1rem 1.3rem; }
    .prose li { margin-bottom: 0.35rem; }

    /* inline math-ish */
    .m {
      font-family: var(--mono); font-size: 0.92em;
      background: var(--bg-sunken);
      padding: 0.08em 0.38em; border-radius: 4px;
      white-space: nowrap;
    }
    .m.obj { color: var(--accent-secondary); background: var(--accent-secondary-light); }
    .m.mor { color: var(--accent-dark); background: var(--accent-light); }

    /* === CALLOUT === */
    .callout {
      display: flex; gap: 0.85rem;
      background: var(--accent-light);
      border: 1px solid #d1d6ec;
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 1rem 1.15rem;
      margin: 1.5rem 0;
      font-size: 0.95rem;
    }
    .callout .ic { font-size: 1.2rem; flex-shrink: 0; line-height: 1.5; }
    .callout.warn { background: var(--warn-light); border-color: #f3dcb6; border-left-color: var(--warn); }
    .callout strong { color: var(--accent-dark); }
    .callout.warn strong { color: var(--warn); }

    /* === FIGURE / WIDGET === */
    .widget {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.25rem;
      margin: 1.5rem 0;
      box-shadow: 0 1px 3px var(--shadow);
    }
    .widget-head {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: 0.6rem;
      margin-bottom: 0.5rem;
    }
    .widget-title {
      font-size: 0.78rem; font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted);
      display: flex; align-items: center; gap: 0.45rem;
    }
    .widget-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
    .hint { font-size: 0.8rem; color: var(--text-muted); }

    svg.diagram { width: 100%; height: auto; display: block; touch-action: none; user-select: none; }
    .diagram-wrap { background: var(--bg-sunken); border-radius: 0.5rem; padding: 0.5rem; }

    /* === BUTTONS / CONTROLS === */
    .controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; align-items: center; }
    .btn {
      font: inherit; font-size: 0.85rem; font-weight: 500;
      border: 1px solid var(--border); background: var(--bg-card);
      color: var(--text); border-radius: 8px;
      padding: 0.45rem 0.85rem; cursor: pointer;
      transition: all 0.15s ease-out;
      display: inline-flex; align-items: center; gap: 0.4rem;
    }
    .btn:hover { border-color: var(--accent); color: var(--accent-dark); }
    .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn.primary:hover { background: var(--accent-dark); color: #fff; }
    .btn.active { background: var(--accent-light); border-color: var(--accent); color: var(--accent-dark); }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .readout {
      font-family: var(--mono); font-size: 0.85rem;
      color: var(--text-muted); margin-left: auto;
    }
    select.pick {
      font: inherit; font-family: var(--mono); font-size: 0.85rem;
      padding: 0.3rem 0.5rem; border-radius: 6px;
      border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
      cursor: pointer;
    }
    input[type=range].slider {
      -webkit-appearance: none; appearance: none;
      width: 180px; height: 6px;
      background: var(--bg-sunken); border-radius: 999px; outline: none;
      cursor: pointer;
    }
    input[type=range].slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent); border: 2px solid #fff;
      box-shadow: 0 1px 3px var(--shadow); cursor: pointer;
    }
    input[type=range].slider::-moz-range-thumb {
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent); border: 2px solid #fff;
      box-shadow: 0 1px 3px var(--shadow); cursor: pointer;
    }
    .slider-row { display: flex; align-items: center; gap: 0.6rem; }
    .slider-row label { font-size: 0.82rem; color: var(--text-muted); font-family: var(--mono); }

    /* === CODE / LANGUAGE TOGGLE === */
    .code-card { border: 1px solid var(--code-border); border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0; }
    .code-tabs { display: flex; background: var(--code-bg-soft); border-bottom: 1px solid var(--code-border); }
    .code-tab {
      font: inherit; font-size: 0.82rem; font-weight: 500;
      font-family: var(--mono);
      color: var(--text-muted); background: transparent; border: none;
      padding: 0.6rem 1.05rem; cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }
    .code-tab:hover { color: var(--text); }
    .code-tab.active { color: var(--accent-dark); border-bottom-color: var(--accent); }
    .code-tab .lang-ic { opacity: 0.9; margin-right: 0.4rem; }
    pre.code {
      margin: 0; padding: 1.1rem 1.2rem;
      background: var(--code-bg); color: var(--code-fg);
      font-family: var(--mono); font-size: 0.84rem; line-height: 1.7;
      overflow-x: auto;
    }
    pre.code .cm { color: var(--code-cm); font-style: italic; } /* comment */
    pre.code .kw { color: var(--code-kw); }                      /* keyword */
    pre.code .ty { color: var(--code-ty); }                      /* type */
    pre.code .fn { color: var(--code-fn); }                      /* function/value name */
    pre.code .op { color: var(--code-op); }                      /* operator */
    pre.code .st { color: var(--code-st); }                      /* string/literal */
    .code-pane { display: none; }
    .code-pane.active { display: block; }

    /* === QUIZ === */
    .quiz-q { margin-bottom: 1.4rem; }
    .quiz-q:last-child { margin-bottom: 0; }
    .quiz-q .q { font-weight: 600; margin-bottom: 0.6rem; }
    .quiz-q .q .qn {
      font-family: var(--mono); color: var(--accent); font-size: 0.85rem; margin-right: 0.4rem;
    }
    .opt {
      display: block; width: 100%; text-align: left;
      font: inherit; font-size: 0.92rem;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 8px; padding: 0.6rem 0.85rem; margin-bottom: 0.5rem;
      cursor: pointer; transition: all 0.12s ease-out;
      display: flex; align-items: center; gap: 0.6rem;
    }
    .opt:hover:not(.locked) { border-color: var(--accent); background: var(--accent-light); }
    .opt .mark { width: 18px; flex-shrink: 0; font-weight: 700; }
    .opt.correct { border-color: var(--ok); background: var(--ok-light); color: #1b5e2e; }
    .opt.wrong { border-color: var(--err); background: var(--err-light); color: #b91c1c; }
    .opt.locked { cursor: default; }
    .quiz-fb { font-size: 0.88rem; margin-top: 0.4rem; min-height: 1.2em; color: var(--text-muted); }
    .quiz-fb.show.ok { color: var(--ok); }
    .quiz-fb.show.no { color: var(--err); }

    /* === SIMULATOR BAR === */
    .sim-stats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem; margin-top: 0.85rem;
    }
    .sim-stat {
      background: var(--bg-sunken); border-radius: 8px;
      padding: 0.55rem 0.7rem; text-align: left;
    }
    .sim-stat .lbl {
      font-size: 0.7rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
    }
    .sim-stat .val { font-family: var(--mono); font-size: 1.05rem; font-weight: 600; color: var(--text); margin-top: 0.15rem; }
    .sim-stat.coral .val { color: var(--accent-secondary); }
    .sim-stat.indigo .val { color: var(--accent); }
    .sim-stat.ok .val { color: var(--ok); }
    @media (max-width: 600px) {
      .sim-stats { grid-template-columns: repeat(2, 1fr); }
    }
    .converge-wrap {
      margin-top: 0.85rem; background: var(--bg-sunken);
      border-radius: 8px; padding: 0.6rem 0.75rem;
    }
    .converge-bar {
      position: relative; height: 8px; background: #eaeaf0; border-radius: 999px; overflow: hidden;
    }
    .converge-bar .fill {
      position: absolute; top: 0; left: 0; bottom: 0;
      background: var(--accent); border-radius: 999px;
      transition: width 0.3s ease-out;
    }
    .converge-bar .tick {
      position: absolute; top: -3px; bottom: -3px; width: 2px;
      background: var(--accent-secondary); border-radius: 1px;
    }
    .converge-lbl {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.3rem;
      font-family: var(--mono);
    }

    /* === NEXT / FOOTER === */
    .next-card {
      display: flex; align-items: center; gap: 1rem;
      background: linear-gradient(135deg, var(--accent-light), var(--accent-secondary-light));
      border: 1px solid #d1d6ec; border-radius: var(--radius);
      padding: 1.25rem 1.4rem; margin: 2.5rem 0 1rem;
    }
    .next-card .big { font-size: 1.6rem; }
    .next-card .t1 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); font-weight: 600; }
    .next-card .t2 { font-weight: 600; font-size: 1.05rem; }
    .next-card .t3 { font-size: 0.88rem; color: var(--text-muted); }
    .next-card .lock { margin-left: auto; font-size: 0.8rem; color: var(--text-muted); }
    a.next-card { color: inherit; text-decoration: none; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
    a.next-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--shadow); text-decoration: none; }
    .next-card .arrow { margin-left: auto; font-size: 1.4rem; color: var(--accent-dark); transition: transform 0.2s ease-out; }
    a.next-card:hover .arrow { transform: translateX(4px); }

    .next-card.next-soon { opacity: 0.7; cursor: default; }
    .next-card.next-soon:hover { transform: none; box-shadow: none; }
    .next-card .badge-soon {
      margin-left: auto;
      font-size: 0.7rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em;
      padding: 0.25rem 0.6rem; border-radius: 999px;
      border: 1px dashed var(--border);
    }

    footer {
      padding: 2.5rem 0; text-align: center;
      font-size: 0.8rem; color: var(--text-muted);
      border-top: 1px solid var(--border); margin-top: 1rem;
    }

    /* === REDUCED MOTION === */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
    }

    /* === RESPONSIVE === */
    @media (max-width: 767px) {
      .hero { padding: 3rem 0 2rem; }
      .hero-title { font-size: 2.1rem; }
      .hero-subtitle { font-size: 1rem; }
      h2.sec { font-size: 1.4rem; }
      header nav a:not(.nav-keep) { display: none; }
      .readout { margin-left: 0; width: 100%; }
    }


/* ============================================================
   Chapter 3 widgets
   ============================================================ */
/* === CHAPTER 3 — SORTING (widget rules) === */

    /* tally table: exact comparison counts for the three algorithms */
    .c03-tally {
      margin-top: 0.85rem;
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.5rem 0.6rem;
      display: grid;
      gap: 0.3rem;
    }
    .c03-tally-row {
      display: grid;
      grid-template-columns: 7.5rem 1fr auto;
      align-items: center;
      gap: 0.6rem;
      font-family: var(--mono);
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .c03-tally-row .c03-name { font-weight: 600; color: var(--text); }
    .c03-tally-row.c03-live .c03-name { color: var(--accent-dark); }
    .c03-tally-meter {
      position: relative;
      height: 8px;
      background: #eaeaf0;
      border-radius: 999px;
      overflow: hidden;
    }
    .c03-tally-meter .c03-fill {
      position: absolute; top: 0; left: 0; bottom: 0;
      border-radius: 999px;
      background: var(--accent);
      transition: width 0.2s ease-out;
    }
    .c03-tally-row.c03-quad .c03-fill { background: var(--accent-secondary); }
    .c03-tally-row.c03-lin  .c03-fill { background: var(--ok); }
    .c03-tally-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
    @media (max-width: 600px) {
      .c03-tally-row { grid-template-columns: 5.5rem 1fr auto; font-size: 0.72rem; }
    }

    /* verdict line for the sort-or-search calculator */
    .c03-verdict {
      margin-top: 0.85rem;
      border-radius: 8px;
      padding: 0.7rem 0.9rem;
      font-size: 0.95rem;
      border: 1px solid var(--border);
      background: var(--bg-sunken);
      display: flex; align-items: center; gap: 0.6rem;
    }
    .c03-verdict .c03-ic { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; }
    .c03-verdict.c03-dont {
      background: var(--ok-light);
      border-color: #bfe3cb;
      color: #1b5e2e;
    }
    .c03-verdict.c03-pays {
      background: var(--accent-secondary-light);
      border-color: #f0cbb9;
      color: #9a4526;
    }
    .c03-verdict strong { font-family: var(--mono); font-weight: 700; }

    /* small mono footnote under a widget */
    .c03-note {
      margin-top: 0.55rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* pull-quote used in the "err on the side of mess" beat */
    .c03-quote {
      font-family: 'Fraunces', Georgia, serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--accent-dark);
      border-left: 3px solid var(--accent-secondary);
      padding-left: 1rem;
      margin: 1.4rem 0;
    }


/* ============================================================
   Chapter 4 widgets
   ============================================================ */
/* === CHAPTER 4 — CACHING === */

    /* --- shared: policy hit-rate tiles (5 across) --- */
    .c04-rates {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 0.5rem; margin-top: 0.85rem;
    }
    .c04-rate {
      background: var(--bg-sunken); border-radius: 8px;
      padding: 0.55rem 0.7rem; text-align: left;
      border: 1px solid transparent;
      transition: border-color 0.15s ease-out, background 0.15s ease-out;
    }
    .c04-rate .lbl {
      font-size: 0.68rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
      white-space: nowrap;
    }
    .c04-rate .val {
      font-family: var(--mono); font-size: 1.05rem; font-weight: 600;
      color: var(--text); margin-top: 0.15rem;
    }
    .c04-rate .gap {
      font-family: var(--mono); font-size: 0.68rem; color: var(--text-muted);
    }
    .c04-rate.shown { border-color: var(--accent); background: var(--accent-light); }
    .c04-rate.ceiling { background: var(--ok-light); }
    .c04-rate.ceiling .val { color: var(--ok); }
    .c04-rate.ceiling .lbl { color: #1b5e2e; }
    @media (max-width: 700px) {
      .c04-rates { grid-template-columns: repeat(3, 1fr); }
    }

    /* --- eviction widget --- */
    .c04-evict-flash-ok  { animation: c04-pop-ok 0.45s ease-out; }
    .c04-evict-flash-err { animation: c04-pop-err 0.45s ease-out; }
    @keyframes c04-pop-ok {
      0%   { stroke-width: 5; }
      100% { stroke-width: 1.6; }
    }
    @keyframes c04-pop-err {
      0%   { stroke-width: 5; }
      100% { stroke-width: 1.6; }
    }

    /* --- memory hierarchy ladder --- */
    .c04-rung { cursor: pointer; }
    .c04-rung rect.bar { transition: opacity 0.15s ease-out; }
    .c04-rung:hover rect.bar { opacity: 1 !important; }
    .c04-scale-note {
      margin-top: 0.85rem; background: var(--bg-sunken);
      border-radius: 8px; padding: 0.7rem 0.85rem;
      font-size: 0.9rem; color: var(--text);
      border-left: 3px solid var(--accent-secondary);
      min-height: 3.6rem;
    }
    .c04-scale-note .n1 {
      font-family: var(--mono); font-size: 0.78rem; font-weight: 700;
      color: var(--accent-dark); text-transform: uppercase; letter-spacing: 0.07em;
    }
    .c04-scale-note .n2 { font-family: var(--mono); font-size: 0.85rem; color: var(--text-muted); }
    .c04-scale-note .n3 { margin-top: 0.2rem; }
    .c04-scale-note .n3 b { color: var(--accent-secondary); font-family: var(--mono); }

    /* --- noguchi pile --- */
    .c04-box { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; }
    .c04-box rect { transition: fill 0.2s ease-out, stroke 0.2s ease-out; }
    .c04-box:hover rect.face { stroke: var(--accent-secondary); stroke-width: 2.4; }
    @media (prefers-reduced-motion: reduce) {
      .c04-box { transition: none; }
      .c04-evict-flash-ok, .c04-evict-flash-err { animation: none; }
    }


/* ============================================================
   Chapter 5 widgets
   ============================================================ */
/* === CH.5 — SCHEDULING === */

    /* metric tiles: mark the metric this policy actually wins */
    .c05-best {
      outline: 2px solid var(--ok);
      outline-offset: -2px;
      background: var(--ok-light);
    }
    .c05-best .lbl::after {
      content: ' ✓ best';
      color: var(--ok);
      letter-spacing: 0.04em;
    }

    /* draggable gantt rows */
    .c05-row { cursor: grab; }
    .c05-row:active { cursor: grabbing; }
    .c05-row.c05-dragging { cursor: grabbing; }
    .c05-row .c05-grip { opacity: 0.35; }
    .c05-row:hover .c05-grip { opacity: 0.9; }

    /* stepper cluster under the schedule playground */
    .c05-steppers {
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.55rem 0.7rem;
      gap: 0.4rem;
    }
    .c05-sel {
      font-size: 0.78rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
      margin-right: 0.2rem;
    }
    .c05-sel strong {
      font-family: var(--mono); font-weight: 700;
      text-transform: none; letter-spacing: 0;
      color: var(--accent-dark);
    }
    .c05-stepgroup {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
    }
    .c05-stepgroup .c05-num {
      font-weight: 700; color: var(--text);
      min-width: 2.1em; text-align: center;
    }
    .c05-stepgroup .btn {
      padding: 0.1rem 0.5rem; font-family: var(--mono); font-weight: 700; line-height: 1.4;
    }

    /* small inline legends under the SVGs */
    .c05-legend {
      display: flex; flex-wrap: wrap; gap: 0.9rem;
      margin-top: 0.6rem;
      font-size: 0.76rem; color: var(--text-muted);
    }
    .c05-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .c05-legend i {
      width: 14px; height: 10px; border-radius: 3px; display: inline-block;
      border: 1px solid var(--border);
    }
    .c05-legend i.c05-k-work { background: var(--accent); border-color: var(--accent); }
    .c05-legend i.c05-k-late { background: var(--err); border-color: var(--err); }
    .c05-legend i.c05-k-switch { background: var(--accent-secondary); border-color: var(--accent-secondary); }
    .c05-legend i.c05-k-dead { background: var(--bg-sunken); border-color: var(--text-muted); }
    .c05-legend i.c05-k-block { background: var(--err-light); border-color: var(--err); }
    .c05-legend i.c05-k-ready { background: #eaeaf0; }

    /* the thrashing verdict line */
    .c05-verdict {
      font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
      margin-left: auto; color: var(--text-muted);
    }
    .c05-verdict.c05-bad { color: var(--err); }
    .c05-verdict.c05-good { color: var(--ok); }

    @media (max-width: 767px) {
      .c05-verdict { margin-left: 0; width: 100%; }
    }


/* ============================================================
   Chapter 6 widgets
   ============================================================ */
/* === CHAPTER 6 — BAYES'S RULE === */

    /* legend shared by ch.6 widgets */
    .c06-legend {
      display: flex; flex-wrap: wrap; gap: 0.35rem 1rem;
      margin-top: 0.7rem;
      font-size: 0.78rem; color: var(--text-muted);
      font-family: var(--mono);
    }
    .c06-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
    .c06-sw {
      width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0;
      border: 1px solid rgba(26, 26, 46, 0.12);
    }
    .c06-sw.tp { background: var(--accent); }
    .c06-sw.fp { background: var(--accent-secondary); }
    .c06-sw.fn { background: var(--warn); }
    .c06-sw.tn { background: #d9d7e4; }

    /* the rare-disease verdict line */
    .c06-verdict {
      margin-top: 0.85rem;
      background: var(--bg-sunken);
      border-radius: 8px;
      border-left: 3px solid var(--accent-secondary);
      padding: 0.7rem 0.9rem;
      font-size: 0.92rem;
      line-height: 1.55;
    }
    .c06-verdict .big {
      font-family: var(--mono); font-weight: 700;
      font-size: 1.25rem; color: var(--accent-secondary);
    }
    .c06-verdict strong { color: var(--accent-dark); }

    /* three-across readout tiles (shapes + laplace) */
    .c06-three {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem; margin-top: 0.85rem;
    }
    .c06-tile {
      background: var(--bg-sunken); border-radius: 8px;
      padding: 0.6rem 0.7rem;
      border: 1px solid transparent;
      transition: border-color 0.2s ease-out, background 0.2s ease-out;
    }
    .c06-tile .lbl {
      font-size: 0.68rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600;
    }
    .c06-tile .val {
      font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
      margin-top: 0.15rem;
    }
    .c06-tile .sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
    .c06-tile.normal .val { color: var(--accent); }
    .c06-tile.power  .val { color: var(--accent-secondary); }
    .c06-tile.erlang .val { color: var(--ok); }
    .c06-tile.is-true { border-color: var(--accent); background: var(--accent-light); }
    .c06-tile .flag {
      display: none;
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--accent-dark);
      margin-top: 0.25rem;
    }
    .c06-tile.is-true .flag { display: block; }
    @media (max-width: 600px) {
      .c06-three { grid-template-columns: 1fr; }
    }

    /* preset chooser row */
    .c06-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
    .c06-presets .c06-plabel {
      font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
      margin-right: 0.15rem;
    }
    .c06-chip {
      font: inherit; font-size: 0.78rem; font-weight: 500;
      border: 1px solid var(--border); background: var(--bg-card);
      color: var(--text-muted); border-radius: 999px;
      padding: 0.28rem 0.7rem; cursor: pointer;
      transition: all 0.15s ease-out;
    }
    .c06-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
    .c06-chip.active {
      background: var(--accent-light); border-color: var(--accent);
      color: var(--accent-dark); font-weight: 600;
    }

    /* steppers for the small-sample guesser */
    .c06-stepper {
      display: inline-flex; align-items: center; gap: 0.15rem;
      border: 1px solid var(--border); border-radius: 8px;
      background: var(--bg-card); padding: 0.15rem;
    }
    .c06-step-btn {
      font: inherit; font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
      width: 26px; height: 26px; line-height: 1;
      border: none; border-radius: 6px; background: transparent;
      color: var(--accent); cursor: pointer;
      transition: background 0.15s ease-out;
    }
    .c06-step-btn:hover { background: var(--accent-light); }
    .c06-step-btn:disabled { opacity: 0.3; cursor: not-allowed; background: transparent; }
    .c06-step-val {
      font-family: var(--mono); font-size: 0.88rem; font-weight: 700;
      min-width: 3.1rem; text-align: center; color: var(--text);
    }
    .c06-step-lbl {
      font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
      margin-right: 0.35rem;
    }

    /* the named rule, revealed after the intuition */
    .c06-formula {
      background: var(--bg-sunken);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--radius);
      padding: 1rem 1.15rem;
      margin: 1.4rem 0;
      text-align: center;
    }
    .c06-formula .eq {
      font-family: var(--mono); font-size: 1.15rem; font-weight: 700;
      color: var(--accent-dark);
      overflow-x: auto; white-space: nowrap; display: block;
      padding-bottom: 0.2rem;
    }
    .c06-formula .gloss {
      font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem;
      font-style: italic;
    }
    .c06-formula .eq .hl { color: var(--accent-secondary); }

    /* the three-shapes summary table */
    .c06-shapes-table {
      width: 100%; border-collapse: collapse; margin: 1.3rem 0;
      font-size: 0.9rem;
    }
    .c06-shapes-table th, .c06-shapes-table td {
      text-align: left; padding: 0.6rem 0.7rem;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    .c06-shapes-table th {
      font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--text-muted); font-weight: 700;
      border-bottom: 1px solid var(--accent-light);
    }
    .c06-shapes-table td:first-child { font-weight: 600; white-space: nowrap; }
    .c06-shapes-table tr:last-child td { border-bottom: none; }
    .c06-shapes-table .rule {
      font-family: var(--mono); font-size: 0.82rem; font-weight: 700;
    }
    .c06-shapes-table tr.r-normal .rule { color: var(--accent); }
    .c06-shapes-table tr.r-power .rule  { color: var(--accent-secondary); }
    .c06-shapes-table tr.r-erlang .rule { color: var(--ok); }
    @media (max-width: 600px) {
      .c06-shapes-table, .c06-shapes-table tbody, .c06-shapes-table tr, .c06-shapes-table td { display: block; width: 100%; }
      .c06-shapes-table thead { display: none; }
      .c06-shapes-table tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
      .c06-shapes-table td { border-bottom: none; padding: 0.15rem 0; }
    }

    /* pulse on the dragged handle (reduced-motion safe) */
    @keyframes c06-pulse {
      0%, 100% { r: 9; }
      50%      { r: 11; }
    }
    .c06-handle { cursor: grab; }
    .c06-handle:active { cursor: grabbing; }
    .c06-handle-ring { animation: c06-pulse 2.4s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .c06-handle-ring { animation: none; }
    }

    /* Hero visual: the SVG is 440 user units wide, which is wider than the
       container on a narrow phone. Without this it would be cropped by the
       hero's overflow:hidden rather than scaled down. */
    .c06-hero-svg { max-width: 100%; height: auto; }


/* ============================================================
   Chapter 7 widgets
   ============================================================ */
/* === CHAPTER 7 — OVERFITTING (widget rules) === */

    /* verdict line under the wiggle-slider fit widget */
    .c07-verdict {
      margin-top: 0.85rem;
      border-radius: 8px;
      padding: 0.7rem 0.9rem;
      font-size: 0.95rem;
      border: 1px solid var(--border);
      background: var(--bg-sunken);
      display: flex; align-items: center; gap: 0.6rem;
      transition: background 0.2s ease-out, border-color 0.2s ease-out;
    }
    .c07-verdict .c07-ic { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; }
    .c07-verdict.c07-good {
      background: var(--ok-light);
      border-color: #bfe3cb;
      color: #1b5e2e;
    }
    .c07-verdict.c07-over {
      background: var(--err-light);
      border-color: #f5c6c6;
      color: #b91c1c;
    }
    .c07-verdict.c07-under,
    .c07-verdict.c07-drift {
      background: var(--warn-light);
      border-color: #f3dcb6;
      color: #8a5108;
    }
    .c07-verdict strong { font-family: var(--mono); font-weight: 700; }

    /* Goodhart narration block — three deadpan mono lines */
    .c07-narrate {
      margin-top: 0.85rem;
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.7rem 0.85rem;
      font-family: var(--mono);
      font-size: 0.82rem;
      line-height: 1.75;
      color: var(--text-muted);
      display: grid;
      gap: 0.1rem;
    }
    .c07-narrate-row {
      display: grid;
      grid-template-columns: 12.5rem 1fr;
      gap: 0.5rem;
    }
    .c07-narrate-row .c07-k { color: var(--text-muted); }
    .c07-narrate-row .c07-v { font-weight: 700; color: var(--text); }
    .c07-narrate-row.c07-metric .c07-v { color: var(--ok); }
    .c07-narrate-row.c07-goal .c07-v { color: var(--err); }
    .c07-narrate-punch {
      margin-top: 0.4rem;
      padding-top: 0.45rem;
      border-top: 1px dashed var(--border);
      font-style: italic;
      color: var(--accent-dark);
      font-weight: 600;
    }
    @media (max-width: 600px) {
      .c07-narrate-row { grid-template-columns: 1fr; gap: 0; }
      .c07-narrate-row .c07-v { margin-bottom: 0.25rem; }
    }

    /* pull-quote for the "think less" beats */
    .c07-quote {
      font-family: 'Fraunces', Georgia, serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--accent-dark);
      border-left: 3px solid var(--accent-secondary);
      padding-left: 1rem;
      margin: 1.4rem 0;
    }

    /* small mono footnote under a widget */
    .c07-note {
      margin-top: 0.55rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    /* Darwin's marriage list — two honest columns on a scrap of paper */
    .c07-darwin {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
      margin: 1.5rem 0;
    }
    .c07-darwin-col {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 0.9rem 1rem;
    }
    .c07-darwin-col h4 {
      font-family: var(--mono);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 0.5rem;
    }
    .c07-darwin-col.c07-marry { border-left: 3px solid var(--ok); }
    .c07-darwin-col.c07-marry h4 { color: var(--ok); }
    .c07-darwin-col.c07-not { border-left: 3px solid var(--accent-secondary); }
    .c07-darwin-col.c07-not h4 { color: var(--accent-secondary); }
    .c07-darwin-col ul { margin: 0 0 0 1.05rem; }
    .c07-darwin-col li {
      font-size: 0.85rem;
      color: var(--text-muted);
      margin-bottom: 0.2rem;
    }
    @media (max-width: 600px) {
      .c07-darwin { grid-template-columns: 1fr; }
    }

    /* The scenario picker's option labels are long ("Nail factory · measured
       on nails produced"), and a <select> sizes itself to its widest option.
       Shared `select.pick` sets no width, so on a 375px phone it grew to 399px
       and dragged the whole page sideways. min-width:0 is the load-bearing half:
       as a flex item it defaults to min-width:auto, which would beat max-width. */
    .c07-scenario {
      max-width: 100%;
      min-width: 0;
      flex-shrink: 1;
    }

    /* Shared `.m` is white-space:nowrap, which is right for the short snippets
       it was built for. Ch.7 quotes a whole expression inline
       (`rmse(m, held) + lambda * complexity(m)`), and nowrap made that an
       unbreakable 330px box. Let these ones wrap at spaces instead. */
    .c07-mwrap {
      white-space: normal;
      overflow-wrap: anywhere;
    }


/* ============================================================
   Chapter 8 widgets
   ============================================================ */
/* === CHAPTER 8 — RELAXATION (widget rules) === */

    /* the "receipt": a relaxed bound printed next to the answer you shipped */
    .c08-receipt {
      margin-top: 0.85rem;
      background: var(--accent-light);
      border: 1px solid #d1d6ec;
      border-left: 3px solid var(--accent);
      border-radius: 8px;
      padding: 0.75rem 0.9rem;
    }
    .c08-receipt-lbl {
      font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--accent-dark);
      margin-bottom: 0.3rem;
    }
    .c08-receipt-main {
      font-size: 0.95rem; line-height: 1.55; color: var(--text);
    }
    .c08-receipt-main strong { font-family: var(--mono); font-weight: 700; color: var(--accent-dark); }
    .c08-receipt-main em { font-style: normal; font-family: var(--mono); font-weight: 700; color: var(--accent-secondary); }

    /* horizontal gap meter: lower bound ──── your tour */
    .c08-gap {
      position: relative;
      height: 10px;
      background: #eaeaf0;
      border-radius: 999px;
      margin-top: 0.6rem;
      overflow: hidden;
    }
    .c08-gap .c08-gap-fill {
      position: absolute; top: 0; left: 0; bottom: 0;
      background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
      border-radius: 999px;
      transition: width 0.25s ease-out;
    }
    .c08-gap-scale {
      display: flex; justify-content: space-between;
      font-family: var(--mono); font-size: 0.7rem;
      color: var(--text-muted);
      margin-top: 0.25rem;
    }

    /* small mono footnote under a widget */
    .c08-note {
      margin-top: 0.6rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .c08-note b { color: var(--accent-secondary); font-weight: 700; }

    /* verdict strip used by the fractional + Lagrangian widgets */
    .c08-verdict {
      margin-top: 0.85rem;
      border-radius: 8px;
      padding: 0.7rem 0.9rem;
      font-size: 0.93rem;
      border: 1px solid var(--border);
      background: var(--bg-sunken);
      display: flex; align-items: center; gap: 0.6rem;
      min-height: 3.2rem;
    }
    .c08-verdict .c08-ic { font-size: 1.15rem; line-height: 1.4; flex-shrink: 0; }
    .c08-verdict strong { font-family: var(--mono); font-weight: 700; }
    .c08-verdict.c08-good { background: var(--ok-light); border-color: #bfe3cb; color: #1b5e2e; }
    .c08-verdict.c08-cost { background: var(--accent-secondary-light); border-color: #f0cbb9; color: #9a4526; }
    .c08-verdict.c08-warn { background: var(--warn-light); border-color: #f3dcb6; color: #8a4f06; }

    /* pull-quote for the wall-vs-price-tag beat */
    .c08-quote {
      font-family: 'Fraunces', Georgia, serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--accent-dark);
      border-left: 3px solid var(--accent-secondary);
      padding-left: 1rem;
      margin: 1.4rem 0;
    }

    /* legend chips under the fractional-cover widget */
    .c08-legend {
      display: flex; flex-wrap: wrap; gap: 0.9rem;
      margin-top: 0.6rem;
      font-family: var(--mono); font-size: 0.73rem;
      color: var(--text-muted);
    }
    .c08-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .c08-legend i {
      width: 12px; height: 12px; border-radius: 50%;
      border: 2px solid var(--accent); display: inline-block;
    }
    .c08-legend i.c08-full { background: var(--accent); }
    .c08-legend i.c08-half { background: linear-gradient(to top, var(--accent) 50%, #fff 50%); }
    .c08-legend i.c08-none { background: #fff; }

    /* hero art: scale with the column instead of being clipped on narrow screens */
    .c08-hero-art { width: 100%; max-width: 420px; height: auto; }


/* ============================================================
   Chapter 9 widgets
   ============================================================ */
/* === CH.9 — RANDOMNESS (c09-) === */

    /* five-across stat grid for the annealing readout */
    .sim-stats.c09-stats5 { grid-template-columns: repeat(5, 1fr); }
    @media (max-width: 760px) {
      .sim-stats.c09-stats5 { grid-template-columns: repeat(2, 1fr); }
    }

    /* the number-under-test input in the Miller-Rabin widget */
    .c09-num-input {
      font: inherit; font-family: var(--mono); font-size: 0.82rem;
      color: var(--text); background: var(--bg-card);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 0.42rem 0.6rem;
      width: 20rem; max-width: 100%;
    }
    .c09-num-input:focus { outline: none; border-color: var(--accent); }
    .c09-num-input.c09-bad { border-color: var(--err); background: var(--err-light); }

    /* auto-cool checkbox pill */
    .c09-cool {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted);
      border: 1px solid var(--border); border-radius: 8px;
      padding: 0.35rem 0.6rem; background: var(--bg-card);
      cursor: pointer; user-select: none;
      transition: border-color 0.15s ease-out, color 0.15s ease-out;
    }
    .c09-cool:hover { border-color: var(--accent); color: var(--accent-dark); }
    .c09-cool input { accent-color: var(--accent); cursor: pointer; }

    /* small mono footnote under a widget (odds, scale comparisons) */
    .c09-fine {
      font-family: var(--mono); font-size: 0.76rem;
      color: var(--text-muted); line-height: 1.6;
      margin-top: 0.7rem; padding: 0.55rem 0.7rem;
      background: var(--bg-sunken); border-radius: 8px;
    }
    .c09-fine b { color: var(--accent-dark); font-weight: 700; }
    .c09-fine .c09-safe { color: var(--ok); font-weight: 700; }
    .c09-fine .c09-risk { color: var(--warn); font-weight: 700; }

    /* the pulsing dot on the annealing marker — gated on reduced motion */
    @keyframes c09-jitter {
      0%, 100% { opacity: 0.85; }
      50%      { opacity: 0.35; }
    }
    .c09-hot { animation: c09-jitter 0.7s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) {
      .c09-hot { animation: none; }
    }


/* ============================================================
   Chapter 10 widgets
   ============================================================ */
/* === CH.10 — NETWORKING === */

    /* preset / mode chip row above a widget's canvas */
    .c10-chips {
      display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.5rem 0.65rem;
      margin-bottom: 0.6rem;
    }
    .c10-chips .c10-chip-lbl {
      font-size: 0.7rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
      margin-right: 0.25rem;
    }
    .c10-chips .btn { padding: 0.28rem 0.65rem; font-size: 0.78rem; }

    /* the "and here's the number" line under a simulator */
    .c10-punch {
      margin-top: 0.7rem;
      background: var(--bg-sunken);
      border-left: 3px solid var(--accent-secondary);
      border-radius: 0 8px 8px 0;
      padding: 0.55rem 0.8rem;
      font-family: var(--mono); font-size: 0.79rem; line-height: 1.6;
      color: var(--text-muted);
    }
    .c10-punch strong { color: var(--accent-dark); font-weight: 700; }
    .c10-punch em { color: var(--accent-secondary); font-style: normal; font-weight: 700; }

    /* inline legends under the SVGs */
    .c10-legend {
      display: flex; flex-wrap: wrap; gap: 0.9rem;
      margin-top: 0.6rem;
      font-size: 0.76rem; color: var(--text-muted);
    }
    .c10-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
    .c10-legend i {
      width: 14px; height: 10px; border-radius: 3px; display: inline-block;
      border: 1px solid var(--border);
    }
    .c10-legend i.c10-k-a { background: var(--accent); border-color: var(--accent); }
    .c10-legend i.c10-k-b { background: var(--accent-secondary); border-color: var(--accent-secondary); }
    .c10-legend i.c10-k-drop { background: var(--err); border-color: var(--err); }
    .c10-legend i.c10-k-cap { background: transparent; border: 1px dashed var(--text-muted); }
    .c10-legend i.c10-k-ok { background: var(--ok); border-color: var(--ok); }

    /* the draggable ceiling grabs a resize cursor */
    .c10-grab { cursor: ns-resize; }

    /* a slider row that reports its own value in mono */
    .c10-val {
      font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
      color: var(--accent-dark);
      min-width: 3.2em; text-align: right;
    }

    /* verdict line, right-aligned in a controls row */
    .c10-verdict {
      font-family: var(--mono); font-size: 0.85rem; font-weight: 600;
      margin-left: auto; color: var(--text-muted);
    }
    .c10-verdict.c10-bad { color: var(--err); }
    .c10-verdict.c10-good { color: var(--ok); }

    @media (max-width: 767px) {
      .c10-verdict { margin-left: 0; width: 100%; }
    }


/* ============================================================
   Chapter 11 widgets
   ============================================================ */
/* === CHAPTER 11 — GAME THEORY (widget rules) === */

    /* payoff steppers: let the reader edit R / S / T / P and break the dilemma */
    .c11-steppers {
      margin-top: 0.85rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
    }
    .c11-stepper {
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.5rem 0.6rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }
    .c11-stepper .c11-lbl {
      font-size: 0.68rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.07em;
      font-weight: 600;
      line-height: 1.3;
    }
    .c11-stepper .c11-lbl b { color: var(--accent-dark); font-family: var(--mono); }
    .c11-stepper .c11-row {
      display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
    }
    .c11-stepper .c11-val {
      font-family: var(--mono); font-size: 1.05rem; font-weight: 700;
      color: var(--text); font-variant-numeric: tabular-nums;
      min-width: 2ch; text-align: center;
    }
    .c11-step-btn {
      font: inherit; font-family: var(--mono); font-size: 0.9rem; font-weight: 700;
      width: 24px; height: 24px; flex-shrink: 0;
      border: 1px solid var(--border); background: var(--bg-card);
      color: var(--accent-dark); border-radius: 6px;
      cursor: pointer; line-height: 1;
      display: grid; place-items: center;
      transition: border-color 0.15s, background 0.15s;
    }
    .c11-step-btn:hover { border-color: var(--accent); background: var(--accent-light); color: var(--accent-dark); }
    .c11-step-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    @media (max-width: 600px) {
      .c11-steppers { grid-template-columns: repeat(2, 1fr); }
    }

    /* verdict line: is this still a dilemma? */
    .c11-status {
      margin-top: 0.6rem;
      border-radius: 8px;
      padding: 0.6rem 0.85rem;
      font-size: 0.9rem;
      border: 1px solid var(--border);
      background: var(--bg-sunken);
      display: flex; align-items: center; gap: 0.55rem;
    }
    .c11-status .c11-ic { font-size: 1.05rem; line-height: 1.4; flex-shrink: 0; }
    .c11-status strong { font-family: var(--mono); }
    .c11-status.c11-trap {
      background: var(--err-light); border-color: #f4c9c9; color: #9b1c1c;
    }
    .c11-status.c11-free {
      background: var(--ok-light); border-color: #bfe3cb; color: #1b5e2e;
    }

    /* per-round history strip */
    .c11-hist {
      margin-top: 0.85rem;
      background: var(--bg-sunken);
      border-radius: 8px;
      padding: 0.55rem 0.7rem;
      display: grid; gap: 0.3rem;
    }
    .c11-hist-row { display: flex; align-items: center; gap: 0.6rem; }
    .c11-hist-lbl {
      font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
      width: 4.2rem; flex-shrink: 0; text-align: right; font-weight: 600;
    }
    .c11-hist-cells { display: flex; gap: 2px; flex-wrap: wrap; }
    .c11-cell {
      width: 11px; height: 14px; border-radius: 2px;
      background: #e2e0ea;
    }
    .c11-cell.c11-c { background: var(--ok); }
    .c11-cell.c11-d { background: var(--err); }
    .c11-hist-empty {
      font-family: var(--mono); font-size: 0.72rem; color: var(--text-muted);
      font-style: italic;
    }

    /* tournament scoreboard */
    .c11-table {
      margin-top: 0.85rem;
      width: 100%;
      border-collapse: collapse;
      font-family: var(--mono);
      font-size: 0.76rem;
    }
    .c11-table th, .c11-table td {
      padding: 0.32rem 0.4rem;
      text-align: right;
      border-bottom: 1px solid var(--border);
      font-variant-numeric: tabular-nums;
    }
    .c11-table th {
      color: var(--text-muted); font-weight: 600;
      text-transform: uppercase; letter-spacing: 0.05em;
      font-size: 0.66rem;
    }
    .c11-table th:first-child, .c11-table td:first-child {
      text-align: left; font-weight: 700; color: var(--text);
    }
    .c11-table td.c11-total { font-weight: 700; color: var(--accent-dark); background: var(--accent-light); }
    .c11-table tr.c11-champ td { background: var(--accent-secondary-light); }
    .c11-table tr.c11-champ td:first-child { color: var(--accent-secondary); }
    .c11-table td.c11-lost { color: var(--err); }
    .c11-table td.c11-beat { color: var(--ok); font-weight: 700; }
    .c11-table td.c11-self { color: #a8a4bd; }

    /* small mono footnote under a widget */
    .c11-note {
      margin-top: 0.55rem;
      font-family: var(--mono);
      font-size: 0.75rem;
      color: var(--text-muted);
      line-height: 1.55;
    }
    .c11-note strong { color: var(--accent-dark); }

    /* legend for the auction curves */
    .c11-legend {
      display: flex; flex-wrap: wrap; gap: 0.9rem;
      margin-top: 0.6rem;
      font-family: var(--mono); font-size: 0.75rem; color: var(--text-muted);
    }
    .c11-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
    .c11-swatch { width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0; }
    .c11-swatch.c11-dash {
      height: 0; border-top: 3px dashed currentColor; background: none;
    }

    /* pull-quote for the mechanism-design beat */
    .c11-quote {
      font-family: 'Fraunces', Georgia, serif;
      font-style: italic;
      font-size: 1.05rem;
      color: var(--accent-dark);
      border-left: 3px solid var(--accent-secondary);
      padding-left: 1rem;
      margin: 1.4rem 0;
    }


/* ============================================================
   Chapter 12 widgets
   ============================================================ */
/* === CH.12 — COMPUTATIONAL KINDNESS === */

/* --- finale next-card variant (sanctioned unprefixed exception) --- */
.next-card.finale { background: linear-gradient(135deg, var(--accent-light), var(--accent-secondary-light)); }
.next-card.finale .big { font-size: 2.2rem; }
.next-card.finale .t2 { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; }

/* --- constraint chips (widget 1) --- */
.c12-chips {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin-top: 0.85rem;
}
.c12-chip {
  font: inherit; font-size: 0.82rem; font-weight: 500;
  border: 1px dashed var(--border); background: var(--bg-card);
  color: var(--text-muted); border-radius: 999px;
  padding: 0.35rem 0.8rem; cursor: pointer;
  transition: all 0.15s ease-out;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.c12-chip:hover { border-color: var(--accent); color: var(--accent-dark); }
.c12-chip.on {
  background: var(--accent-light); border: 1px solid var(--accent);
  color: var(--accent-dark);
}
.c12-chip .c12-tick { font-family: var(--mono); font-size: 0.72rem; opacity: 0.55; }
.c12-chip.on .c12-tick { opacity: 1; color: var(--accent); }

.c12-verdict {
  margin-top: 0.85rem; padding: 0.7rem 0.9rem;
  border-radius: 8px; font-size: 0.9rem;
  background: var(--warn-light); border-left: 3px solid var(--warn);
  color: var(--text);
  transition: background 0.25s ease-out, border-color 0.25s ease-out;
}
.c12-verdict.c12-kind { background: var(--ok-light); border-left-color: var(--ok); }
.c12-verdict strong { color: var(--accent-dark); }

/* --- lane legend (widget 2) --- */
.c12-legend {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin-top: 0.6rem; font-size: 0.78rem; color: var(--text-muted);
  font-family: var(--mono);
}
.c12-legend span.c12-sw {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px;
}

/* --- recap map (widget 3) --- */
.c12-node { cursor: pointer; }
.c12-node circle { transition: r 0.18s ease-out, stroke-width 0.18s ease-out; }
.c12-node:hover circle.c12-node-hit { stroke-width: 3; }
.c12-card {
  margin-top: 0.85rem;
  background: var(--bg-sunken); border-radius: 8px;
  padding: 0.8rem 0.95rem; min-height: 5.6rem;
  border-left: 3px solid var(--accent);
}
.c12-card .c12-card-h {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 600; font-size: 1rem; margin-bottom: 0.2rem;
}
.c12-card .c12-card-h .c12-em { font-size: 1.2rem; }
.c12-card .c12-card-h .c12-chn {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  color: #fff; background: var(--accent);
  border-radius: 999px; padding: 0.05rem 0.5rem;
}
.c12-card .c12-advice { font-size: 0.95rem; margin-bottom: 0.3rem; }
.c12-card .c12-algo {
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted);
}
.c12-card .c12-algo b { color: var(--accent-secondary); font-weight: 600; }
.c12-card .c12-go { font-size: 0.8rem; margin-top: 0.35rem; display: inline-block; }

/* --- cheat sheet list (section 7) --- */
.c12-sheet {
  list-style: none; margin: 1.2rem 0 0.4rem !important;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-card);
}
.c12-sheet li {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.6rem 0.9rem; margin: 0 !important;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}
.c12-sheet li:last-child { border-bottom: none; }
.c12-sheet li:nth-child(even) { background: var(--bg-sunken); }
.c12-sheet .c12-n {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  color: var(--accent); flex-shrink: 0; width: 1.4rem;
}
.c12-sheet .c12-t { font-weight: 600; flex-shrink: 0; min-width: 8.5rem; }
.c12-sheet .c12-t a { color: var(--text); }
.c12-sheet .c12-t a:hover { color: var(--accent); }
.c12-sheet .c12-a { color: var(--text-muted); }
.c12-sheet li.c12-here { background: var(--accent-secondary-light) !important; }
.c12-sheet li.c12-here .c12-n { color: var(--accent-secondary); }
@media (max-width: 640px) {
  .c12-sheet li { flex-wrap: wrap; }
  .c12-sheet .c12-t { min-width: 0; }
  .c12-sheet .c12-a { flex-basis: 100%; }
}

/* --- pull quote --- */
.c12-quote {
  font-family: 'Fraunces', Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: var(--accent-dark);
  border-left: 3px solid var(--accent-secondary);
  padding-left: 1rem; margin: 1.4rem 0;
}

/* --- searcher pulse --- */
@keyframes c12-pulse {
  0%   { r: 7; opacity: 0.9; }
  100% { r: 18; opacity: 0; }
}
.c12-ping { animation: c12-pulse 0.9s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .c12-ping { animation: none; opacity: 0; }
}