/* ══════════════════════════════════════════════════════════════
   CS112 · Introduction to Data Structures · Calvin University
   Shared slide styling for every week's Reveal.js deck.
   Linked by slides/weekNN.html — edit here, all decks follow.
   ══════════════════════════════════════════════════════════════ */

    /* ── Calvin University palette ── */
    :root {
      --maroon:  #6E1C2E;
      --gold:    #C49A2C;
      --cream:   #F9F4EC;
      --light-gold: #F5E9C8;
    }

    /* ── Base typography ── */
    .reveal {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      font-size: 36px;
      color: #1a1a1a;
    }
    .reveal-viewport { background: #fafaf8; }

    /* ── Headings ── */
    .reveal h1, .reveal h2, .reveal h3 {
      font-family: 'Segoe UI', system-ui, sans-serif;
      color: var(--maroon);
      font-weight: 700;
      text-transform: none;
      letter-spacing: -0.01em;
      margin-bottom: 0.4em;
    }
    .reveal h1 { font-size: 2em; }
    .reveal h2 {
      font-size: 1.35em;
      border-bottom: 3px solid var(--gold);
      padding-bottom: 0.15em;
    }
    .reveal h3 { font-size: 1em; color: var(--gold); }

    /* ── Slide number ── */
    .reveal .slide-number {
      background: var(--maroon);
      color: white;
      font-size: 0.45em;
      padding: 3px 8px;
      border-radius: 4px;
      right: 10px;
      bottom: 10px;
    }

    /* ── Progress bar ── */
    .reveal .progress { color: var(--gold); height: 5px; }

    /* ── Code blocks ── */
    .reveal pre {
      box-shadow: 0 4px 18px rgba(0,0,0,0.18);
      border-radius: 8px;
      font-size: 0.72em;
      margin: 0.5em auto;
      width: 100%;
    }
    .reveal pre code {
      font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
      max-height: 420px;
      padding: 1em 1.2em;
    }

    /* ── Inline code ── */
    /* .pi-question and .answer-box are divs, so they matched none of the
       element selectors below and their inline code rendered in the body font
       while the code in the choices right underneath rendered as code. On a
       TTYN asking about operator<< and ostream& that is exactly the words the
       question turns on, set in the wrong face. */
    .reveal p code, .reveal li code, .reveal td code, .reveal th code,
    .reveal .pi-question code, .reveal .answer-box code,
    .reveal .callout code, .reveal .def-txt code, .reveal .err-why code {
      background: #f0e8d8;
      color: var(--maroon);
      padding: 0.1em 0.35em;
      border-radius: 4px;
      font-size: 0.82em;
      font-family: 'Fira Code', 'Consolas', monospace;
    }

    .reveal h2 code, .reveal h1 code {
      font-family: 'Fira Code', 'Consolas', monospace;
      background: #f3ece0;
      border: 1px solid #e2d5bf;
      border-radius: 6px;
      padding: 0 0.18em;
      font-size: 0.86em;
    }

    /* ── Loop anatomy: start / test / step ── */
    .loop-code {
      background: #272822;              /* monokai, so it matches the real code blocks */
      color: #f8f8f2;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 0.6em;
      line-height: 1.55;
      text-align: left;
      white-space: pre;
      padding: 0.85em 1.1em;
      border-radius: 8px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.18);
      margin: 0.3em auto 0.35em;
      width: 100%;
      box-sizing: border-box;
    }
    .lp-start, .lp-test, .lp-step {
      border-radius: 4px; padding: 0.02em 0.2em; border-bottom: 3px solid;
    }
    .lp-start { background: rgba(96,160,220,0.26); border-bottom-color: #7cb6e8; }
    .lp-test  { background: rgba(224,182,74,0.26); border-bottom-color: #e8c46a; }
    .lp-step  { background: rgba(226,120,110,0.26); border-bottom-color: #f0938b; }

    .lp-legend {
      display: flex; justify-content: center; gap: 1.6em;
      font-size: 0.45em; color: #6a655c; margin: 0 0 0.1em;
    }
    .lp-legend i {
      display: inline-block; width: 0.9em; height: 0.9em; border-radius: 3px;
      margin-right: 0.4em; vertical-align: -0.12em;
    }
    .lp-sw-start { background: #7cb6e8; }
    .lp-sw-test  { background: #e8c46a; }
    .lp-sw-step  { background: #f0938b; }
    .lp-name { font-weight: 800; }
    .lp-step-t { color: #b3261e; }

    .lp-svg { width: 96%; height: auto; display: block; margin: 0 auto;
              font-family: 'Segoe UI', system-ui, sans-serif; }
    .lp-box   { fill: #f4f3f0; stroke: #cfcabf; stroke-width: 1.8; }
    .lp-box-start { fill: #e7f0fa; stroke: #5f95c8; stroke-width: 2.4; }
    .lp-box-test  { fill: #fbf1d8; stroke: var(--gold); stroke-width: 2.4; }
    .lp-box-step  { fill: #fbe6e4; stroke: #c2635c; stroke-width: 2.4; }
    .lp-box-t { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #3a3630;
                letter-spacing: .06em; }
    .lp-note  { fill: #8a857b; font-style: italic; }
    .lp-yes   { fill: #2f6f43; font-style: normal; font-weight: 700; }
    .lp-no    { fill: #b3261e; font-style: normal; font-weight: 700; }
    .lp-arrow { stroke: #7d7a73; stroke-width: 2.2; }
    .lp-exit  { stroke-dasharray: 6 4; }
    .lp-exit-t { fill: #8a857b; }

    .bug-line { margin: 0.35em 0; text-align: center; }
    .bug-line code { font-size: 0.95em; }

    /* ── break / continue jumps ── */
    .bc-break { stroke: #b3261e; stroke-width: 2.6; }
    .bc-cont  { stroke: #2f6f43; stroke-width: 2.6; }
    .bc-break-t { fill: #b3261e; font-weight: 700; }
    .bc-cont-t  { fill: #2f6f43; font-weight: 700; }
    .bc-break-name { color: #b3261e; font-weight: 800;
                     font-family: 'Fira Code','Consolas',monospace; }
    .bc-cont-name  { color: #2f6f43; font-weight: 800;
                     font-family: 'Fira Code','Consolas',monospace; }
    /* the keyword marked inside a dark .loop-code block */
    .bc-kw-break, .bc-kw-cont {
      border-radius: 4px; padding: 0.02em 0.2em; border-bottom: 3px solid;
      font-weight: 700;
    }
    .bc-kw-break { background: rgba(214,60,48,0.34); border-bottom-color: #e0554a;
                   color: #ffb0a8; }
    .bc-kw-cont  { background: rgba(70,170,110,0.30); border-bottom-color: #66c48c;
                   color: #a9e7c2; }
    .lp-dim { color: #8f8b7f; font-style: italic; }

    /* ── Spot-the-bug marker, for answer reveals ── */
    .hl-bad {
      background: #b3261e; color: #fff; font-weight: 800;
      border-radius: 3px; padding: 0 0.22em; margin: 0 0.04em;
    }

    /* ── Keyboard shortcuts ── */
    .reveal kbd {
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 0.8em;
      background: #fdfbf7;
      border: 1px solid #cfc7b6;
      border-bottom-width: 3px;
      border-radius: 5px;
      padding: 0.05em 0.4em;
      margin: 0 0.05em;
      color: #4a4133;
      white-space: nowrap;
    }

    /* ── Bullets ── */
    .reveal ul { font-size: 0.78em; }
    .reveal ul li { margin: 0.3em 0; line-height: 1.4; }

    /* ── Two-column layout ── */
    .two-col h3 { font-size: 0.72em; line-height: 1.2; }
    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.4em;
      align-items: start;
    }

    /* ── Callout boxes ── */
    .callout {
      background: #fff8e1;
      border-left: 4px solid var(--gold);
      padding: 0.45em 0.9em;
      border-radius: 0 8px 8px 0;
      font-size: 0.68em;
      text-align: left;
      margin-top: 0.6em;
      line-height: 1.5;
    }
    .callout-maroon {
      background: #fdf0f2;
      border-left-color: var(--maroon);
    }

    /* ── Peer Instruction ── */
    .pi-badge {
      background: var(--maroon);
      color: white;
      padding: 0.25em 0.75em;
      border-radius: 6px;
      font-size: 0.58em;
      display: inline-block;
      margin-bottom: 0.4em;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      vertical-align: middle;
    }
    .pi-question {
      font-size: 0.78em;
      text-align: left;
      margin-bottom: 0.5em;
    }
    .pi-choices {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      list-style: none !important;
      padding: 0;
      text-align: left;
      font-size: 0.66em;
      margin: 0;
    }
    .pi-choices li {
      list-style: none !important;
      padding: 0.34em 0.8em;
      margin: 0.2em 0;
      border-radius: 7px;
      background: #f4f3f0;
      border-left: 4px solid #d5d2cb;
      line-height: 1.4;
      transition: background .25s ease, border-color .25s ease;
    }
    .pi-choices li.fragment.correct {
      opacity: 1 !important;
      visibility: inherit !important;
    }
    .pi-choices li.correct.visible {
      background: #e9f4ec;
      border-left-color: #2f6f43;
      color: #1d4d2e;
      font-weight: 600;
    }
    .pi-choices li.correct.visible .letter { color: #2f6f43; }
    .pi-choices li.correct.visible::after {
      content: "✓";
      float: right;
      color: #2f6f43;
      font-weight: 700;
    }
    /* seven-option questions need to be tighter */
    .pi-choices.pi-compact { font-size: 0.6em; }
    .pi-choices.pi-compact li {
      padding: 0.2em 0.7em;
      margin: 0.1em 0;
      border-radius: 6px;
      background: #f2f2f2;
      border-left: 4px solid #ccc;
      line-height: 1.4;
    }
    .pi-choices .letter {
      display: inline-block;
      width: 1.4em;
      font-weight: 700;
      color: var(--maroon);
    }

    /* Answer reveal box */
    .answer-box {
      background: #ffffff;
      border: 1px solid #e0ddd6;
      border-left: 5px solid #2f6f43;
      border-radius: 9px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.09);
      padding: 0.55em 0.95em;
      font-size: 0.6em;
      text-align: left;
      margin-top: 0.7em;
      color: #333;
      font-weight: 400;
      line-height: 1.45;
    }
    .answer-box strong { color: #1d4d2e; }
    .answer-box .ans-label {
      font-size: 0.8em;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: #2f6f43;
      margin-bottom: 0.25em;
    }

    /* ── Pointer memory strip ── */
    .pt-svg { width: 96%; height: auto; display: block; margin: 0.2em auto;
              font-family: 'Segoe UI', system-ui, sans-serif; }
    .pt-cell { fill: #f4f3f0; stroke: #d5d2cb; stroke-width: 1.8; }
    .pt-live { fill: #fbf1d8; stroke: var(--gold); stroke-width: 2.4; }
    .pt-ptr  { fill: #f6e2e6; stroke: var(--maroon); stroke-width: 2.4; }
    .pt-name { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: var(--maroon); }
    .pt-val  { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #3a3630; }
    .pt-addr { font-family: 'Fira Code','Consolas',monospace; fill: #a8a49b; }
    .pt-addr-hot { fill: #2b6ea8; font-weight: 700; }
    .pt-arrow { stroke: var(--maroon); stroke-width: 2.6; }
    .pt-note { fill: var(--maroon); font-style: italic; }
    .pt-axis { fill: #b4afa5; font-style: italic; }

    /* ── "Meet Rocky" joke slide ── */
    .joke-row { align-items: start; gap: 2em; }
    .joke-frame {
      background: #f3ece1; border: 3px solid var(--maroon); border-radius: 10px;
      overflow: hidden; height: 300px;
      display: flex; align-items: center; justify-content: center;
    }
    .joke-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .joke-frame.rk-photo { background: #ffffff; }
    .rk-photo .joke-photo { object-fit: contain; padding: 0.4em; }
    .joke-frame .rk-svg { width: 100%; margin: 0; }
    .joke-box {
      position: relative; margin: 1em auto 0; width: fit-content;
      padding: 0.3em 0.9em; border-radius: 10px; font-size: 0.62em; font-weight: 800;
      border: 3px solid var(--maroon); background: #fff;
    }
    .joke-box::before {
      content: ""; position: absolute; top: -10px; left: 50%; margin-left: -8px;
      width: 16px; height: 16px; background: #fff;
      border-left: 3px solid var(--maroon); border-top: 3px solid var(--maroon);
      transform: rotate(45deg);
    }
    .joke-no  { color: var(--maroon); }
    .joke-yes { color: #1d4d2e; border-color: #2f6f43; }
    .joke-yes::before { border-left-color: #2f6f43; border-top-color: #2f6f43; }

    /* ── Rocky / bases slide ── */
    .rk-svg, .rk-tbl { width: 100%; height: auto; display: block;
                       font-family: 'Segoe UI', system-ui, sans-serif; }
    .rk-frame { height: 250px; }
    /* one flat silhouette: limbs are strokes in the same color as the body */
    .rk-body  { fill: #6a5c4c; stroke: #6a5c4c;
                stroke-linecap: round; stroke-linejoin: round; }
    .rk-chip  { fill: #9d8d78; }
    .rk-ground{ stroke: #3f3730; stroke-width: 1.6; opacity: .28; }
    .rk-case      { fill: #dce9de; }
    .rk-case-lip  { fill: #b9c4bb; }
    .rk-case-edge { fill: none; stroke: #7f8a80; stroke-width: 4; }
    .rk-bolt      { fill: #8d968e; }
    .rk-glass { fill: #9fd6b4; opacity: .15; }
    .rk-sheen { fill: #ffffff; opacity: .14; }
    .rk-note  { fill: #8a857b; font-style: italic; }
    .rk-cap   { font-size: 0.46em; color: #8a857b; font-style: italic; margin: 0.1em 0 0; }
    .rk-hdr   { fill: #a8a49b; font-weight: 700; }
    .rk-row   { fill: #3a3630; font-weight: 600; }
    .rk-cell  { fill: #f4f3f0; stroke: #d5d2cb; stroke-width: 1.4; }
    .rk-hot   { fill: #fbf1d8; stroke: var(--gold); stroke-width: 2.2; }
    .rk-num   { font-family: 'Fira Code','Consolas',monospace; fill: #4a4740; }
    .rk-num-hot { font-family: 'Fira Code','Consolas',monospace; fill: #6b5416; font-weight: 700; }
    .rk-carry { fill: #8a857b; font-style: italic; }

    /* ── File I/O figure ── */
    .fio-wrap { margin: 0.1em auto 0.2em; width: 93%; }
    .fio-svg  { width: 100%; height: auto; display: block;
                font-family: 'Segoe UI', system-ui, sans-serif; }
    .fio-doc  { fill: #faf7f1; stroke: var(--maroon); stroke-width: 1.8; }
    .fio-fold { fill: #efe3e6; stroke: var(--maroon); stroke-width: 1.4; }
    .fio-stream { fill: #f7f5f0; stroke: #7d7a73; stroke-width: 1.8; }
    .fio-bar   { fill: #e6e3dc; stroke: none; }
    .fio-var   { fill: #fbf1d8; stroke: var(--gold); stroke-width: 1.8; }
    .fio-cell  { fill: #ffffff; stroke: var(--gold); stroke-width: 1.4; }
    .fio-cell-used { fill: #ebe9e4; stroke: #c2beb4; stroke-width: 1.2; }
    .fio-ch    { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #6b5416; }
    .fio-ch-used { font-family: 'Fira Code','Consolas',monospace; fill: #b4afa5; }
    .fio-code  { font-family: 'Fira Code','Consolas',monospace; fill: #3a3630; }
    .fio-name  { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: var(--maroon); }
    .fio-title { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #3a3630; }
    .fio-val   { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #6b5416; }
    .fio-label { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: var(--maroon); }
    .fio-note  { fill: #8a857b; font-style: italic; }
    .fio-caret { fill: var(--maroon); }
    .fio-head  { fill: var(--maroon); }
    .fio-headt { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #fdf8f0; }
    .fio-arrow { stroke: var(--gold); stroke-width: 2.4; }
    .fio-dashed { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
    .fio-screen { fill: #1e1f1a; stroke: #7d7a73; stroke-width: 1.6; }
    .fio-scr    { font-family: 'Fira Code','Consolas',monospace; fill: #9be36b; }
    .fio-caretbox { fill: #9be36b; }

    /* ── Stream diagram ── */
    .st-wrap { margin: 0.15em auto 0.25em; width: 97%; }
    .st-svg  { width: 100%; height: auto; display: block;
               font-family: 'Segoe UI', system-ui, sans-serif; }
    .st-prog { fill: #faf7f1; stroke: var(--maroon); stroke-width: 2.2; }
    .st-src  { fill: #f2ede4; stroke: #8a7a52; stroke-width: 1.8; }
    .st-dst  { fill: #eceae6; stroke: #7d7a73; stroke-width: 1.8; }
    .st-title { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #3a3630; }
    .st-sub   { fill: #8a857b; font-style: italic; }
    .st-char-box { fill: #fbf1d8; stroke: var(--gold); stroke-width: 1.4; }
    .st-char  { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #6b5416; }
    .st-label { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: var(--maroon); }
    .st-note  { fill: #8a857b; font-style: italic; }
    .st-arrow { stroke: var(--gold); stroke-width: 2.4; }
    .st-kbd    { fill: #eceae6; stroke: #7d7a73; stroke-width: 1.8; }
    .st-key    { fill: #fbfaf8; stroke: #b9b6ae; stroke-width: 1; }
    .st-bezel  { fill: #dedbd5; stroke: #7d7a73; stroke-width: 1.8; }
    .st-screen { fill: #1e1f1a; }
    .st-led    { fill: #b9b6ae; }
    .st-stand  { fill: #dedbd5; stroke: #7d7a73; stroke-width: 1.6; }
    .st-scr-out { font-family: 'Fira Code','Consolas',monospace; fill: #9be36b; }
    .st-scr-err { font-family: 'Fira Code','Consolas',monospace; fill: #ff9d94; }
    .st-scr-dim { font-family: 'Fira Code','Consolas',monospace; fill: #8f8a80; font-style: italic; }
    .st-caret   { fill: #9be36b; }

    /* ── Terminal panel: real program output ── */
    .term {
      box-sizing: border-box;   /* so width:100% matches the code block exactly */
      background: #1e1f1a;
      border: 2px solid var(--gold);
      border-radius: 8px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.18);
      padding: 0.5em 0.85em;
      margin: 0.45em auto 0;
      font-family: 'Fira Code','Consolas',monospace;
      font-size: 0.46em;
      line-height: 1.55;
      text-align: left;
    }
    .term .t-row { display: flex; justify-content: space-between; gap: 1.5em; }
    .term .t-cmd  { color: #9be36b; }
    .term .t-out  { color: #e8e6e0; white-space: pre; }
    .term .t-warn { color: #ff9d94; }
    .term .t-note { color: #8f8a80; font-style: italic; white-space: nowrap; }

    /* ── Variable model: Python Tutor / C++ Tutor style ── */
    .vm-svg { width: 100%; height: auto; display: block; margin-top: 0.1em;
              font-family: 'Segoe UI', system-ui, sans-serif; }
    .vm-frame { fill: #eef2f8; stroke: #9fb2cc; stroke-width: 1.6; }
    .vm-bar   { fill: #dbe4f0; stroke: none; }
    .vm-title { font-family: 'Fira Code','Consolas',monospace; fill: #3c4c63; font-weight: 700; }
    .vm-var   { font-family: 'Fira Code','Consolas',monospace; fill: #2f2f2f; font-weight: 700; }
    .vm-slot  { fill: #ffffff; stroke: #9fb2cc; stroke-width: 1.4; }
    .vm-box   { fill: #ffffff; stroke: #9fb2cc; stroke-width: 1.4; }
    .vm-dot   { fill: #2b6ea8; }
    .vm-arrow { stroke: #2b6ea8; stroke-width: 2.2; }
    .vm-type  { font-family: 'Fira Code','Consolas',monospace; fill: #7a756b; }
    .vm-addr  { font-family: 'Fira Code','Consolas',monospace; fill: #a8a49b; }
    .vm-val   { font-family: 'Fira Code','Consolas',monospace; fill: #1a1a1a; font-weight: 700; }
    .vm-col   { fill: #6a655c; font-weight: 700; }
    .vm-note  { fill: #8a857b; font-style: italic; }
    .vm-empty { fill: none; stroke: #cfcabf; stroke-width: 1.4; stroke-dasharray: 5 4; }
    .vm-faint { fill: #b4afa5; }
    .vm-gone  { fill: #b4afa5; font-family: 'Fira Code','Consolas',monospace; }
    .vm-strike { stroke: #c9a0a0; stroke-width: 1.8; }
    .vm-changed { stroke: var(--gold); stroke-width: 2.4; }
    .vm-warn  { fill: #fff8e1; stroke: var(--gold); stroke-width: 1.4; }
    .vm-warn-t { fill: #8a6d18; }

    /* ── Byte ruler: one square per byte ── */
    .tb-wrap { margin: 0.1em auto 0.2em; width: 96%; }
    .tb-svg  { width: 100%; height: auto; display: block; font-family: 'Segoe UI', system-ui, sans-serif; }
    .tb-cell { stroke-width: 1.6; }
    .tb-int  { fill: #f6e2e6; stroke: var(--maroon); }
    .tb-real { fill: #fbf1d8; stroke: var(--gold); }
    .tb-unit { fill: #eceae6; stroke: #7d7a73; }
    .tb-var  { fill: #eef0ec; stroke: #6b8570; }
    .tb-ghost { fill: none; stroke: #6b8570; stroke-dasharray: 4 3; stroke-width: 1.4; }
    .tb-name  { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: var(--maroon); }
    .tb-size  { font-family: 'Fira Code','Consolas',monospace; fill: #4a4740; }
    .tb-range { fill: #8a857b; font-style: italic; }
    .tb-axis  { fill: #a8a49b; }
    .tb-legend {
      display: flex; justify-content: center; gap: 1.4em;
      font-size: 0.42em; color: #6a655c; margin-top: 0.1em;
    }
    .tb-legend i {
      display: inline-block; width: 0.85em; height: 0.85em; border-radius: 3px;
      border: 1.5px solid #999; margin-right: 0.4em; vertical-align: -0.1em;
    }
    .tb-sw.tb-int  { background: #f6e2e6; border-color: var(--maroon); }
    .tb-sw.tb-real { background: #fbf1d8; border-color: var(--gold); }
    .tb-sw.tb-unit { background: #eceae6; border-color: #7d7a73; }
    .tb-sw.tb-var  { background: #eef0ec; border-color: #6b8570; }

    /* ── Data type grid ── */
    .type-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.55em;
      font-size: 0.62em;
      margin-top: 0.3em;
    }
    .type-card {
      background: var(--cream);
      border-radius: 8px;
      padding: 0.55em 0.4em;
      text-align: center;
      border-top: 3px solid var(--gold);
    }
    .type-card .t-name {
      font-family: 'Fira Code', monospace;
      font-weight: 700;
      color: var(--maroon);
      font-size: 1.1em;
    }
    .type-card .t-size { color: #555; font-size: 0.9em; margin-top: 0.1em; }
    .type-card .t-example { color: #888; font-size: 0.85em; font-style: italic; }

    /* ── Memory diagram ── */
    .mem-diagram {
      border: 2px solid var(--gold);
      border-radius: 8px;
      padding: 0.5em 1em;
      background: #fffdf5;
      font-size: 0.6em;
      font-family: 'Fira Code', monospace;
      max-width: 520px;
      margin: 0.5em auto;
    }
    .mem-row {
      display: flex;
      justify-content: space-between;
      padding: 0.18em 0;
      border-bottom: 1px solid #eee;
      align-items: center;
    }
    .mem-row:last-child { border-bottom: none; }
    .mem-addr { color: #888; min-width: 6em; }
    .mem-val  { color: var(--maroon); font-weight: 700; }
    .mem-lbl  { color: var(--gold); font-weight: 700; font-size: 0.9em; }

    /* ── Compilation flow ── */
    .compile-flow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5em;
      font-size: 0.62em;
      flex-wrap: wrap;
      margin-top: 0.5em;
    }
    .c-box {
      background: var(--cream);
      border: 2px solid var(--maroon);
      border-radius: 8px;
      padding: 0.4em 0.8em;
      text-align: center;
      min-width: 5em;
    }
    .c-box-gold { border-color: var(--gold); }
    .c-box .c-type { font-size: 0.8em; color: #777; }
    .c-box .c-name { font-family: 'Fira Code', monospace; font-weight: 700; color: var(--maroon); font-size: 1.05em; }
    .c-arrow { font-size: 1.6em; color: var(--gold); font-weight: 700; line-height: 1; }
    .c-step  { font-size: 0.82em; color: #555; text-align: center; }
    .c-col   { display: flex; flex-direction: column; gap: 0.4em; align-items: center; }

    /* ── Agenda items ── */
    .agenda-list { list-style: none; padding: 0; margin: 0.2em 0 0; }
    .agenda-list li {
      display: flex;
      align-items: center;
      gap: 0.6em;
      padding: 0.28em 0;
      font-size: 0.72em;
      border-bottom: 1px solid #eee;
    }
    .agenda-num {
      background: var(--maroon);
      color: white;
      width: 1.5em; height: 1.5em;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85em; font-weight: 700;
      flex-shrink: 0;
    }
    .badge {
      background: var(--gold);
      color: white;
      padding: 0.05em 0.45em;
      border-radius: 4px;
      font-size: 0.7em;
      font-weight: 700;
      margin-left: 0.3em;
    }

    /* ── Table (comparison tables only — never code line-number tables) ── */
    .reveal table:not(.hljs-ln) { font-size: 0.58em; width: 100%; border-collapse: collapse; }
    .reveal table:not(.hljs-ln) th {
      background: var(--maroon); color: white;
      padding: 0.4em 0.6em; text-align: left;
    }
    .reveal table:not(.hljs-ln) td { padding: 0.32em 0.6em; border-bottom: 1px solid #eee; }
    .reveal table:not(.hljs-ln) tr:nth-child(even) td { background: #f9f5f0; }

    /* ── Code line numbers ── */
    .reveal .hljs-ln { border-collapse: collapse; width: 100%; }
    .reveal .hljs-ln td {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
    }
    .reveal .hljs-ln td.hljs-ln-numbers {
      color: #a3a89b;
      opacity: 1;
      text-align: right;
      padding-right: 1.1em !important;
      border-right: 1px solid rgba(255,255,255,0.13) !important;
      user-select: none;
      white-space: nowrap;
    }
    .reveal .hljs-ln td.hljs-ln-code { padding-left: 1em !important; }


    /* ── Anatomy slide ── */
    .anatomy-grid {
      display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr);
      gap: 1.5em; align-items: center; margin-top: 0.2em;
    }
    .anatomy-grid pre { margin: 0; font-size: 0.6em; }
    .an-item {
      display: grid; grid-template-columns: auto 1fr;
      gap: 0.7em; align-items: start; margin-bottom: 0.85em;
    }
    .an-item:last-child { margin-bottom: 0; }
    .an-badge {
      background: var(--maroon); color: #fff;
      width: 1.55em; height: 1.55em; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.62em; font-weight: 700; flex-shrink: 0; margin-top: 0.15em;
      font-family: 'Fira Code','Consolas',monospace;
    }
    .an-key {
      font-family: 'Fira Code','Consolas',monospace;
      color: var(--maroon); font-weight: 700; font-size: 0.63em;
      display: block; margin-bottom: 0.1em;
    }
    .an-desc { font-size: 0.58em; line-height: 1.45; color: #333; margin: 0; }
    .an-desc code { font-size: 0.92em; }

    /* stacked variant */
    /* four stacked rows need more height than 2x2 did, so the listing gives some back */
    .anatomy-wide { font-size: 0.5em !important; margin: 0.1em auto 0.4em !important; }
    /* Four full-width rows rather than 2x2 quadrants: the eye runs down the
       list in the same order as the line numbers in the code above it. */
    .anatomy-cards {
      display: grid; grid-template-columns: minmax(0,1fr);
      gap: 0.3em; text-align: left;
    }
    .an-card {
      display: grid; grid-template-columns: auto 1fr; gap: 0.6em;
      background: var(--cream); border-left: 3px solid var(--gold);
      border-radius: 0 6px 6px 0; padding: 0.3em 0.8em; align-items: center;
    }
    /* inside a row, the key sits beside its description instead of above it */
    .an-card > div {
      display: grid; grid-template-columns: minmax(0,auto) minmax(0,1fr);
      gap: 0 1em; align-items: baseline;
    }
    .an-card .an-badge { width: 1.45em; height: 1.45em; font-size: 0.55em; margin-top: 0; }
    .an-card .an-key  { font-size: 0.58em; margin-bottom: 0; white-space: nowrap; }
    .an-card .an-desc { font-size: 0.5em; line-height: 1.38; }


    /* ── Pipeline diagram ── */
    .pipe-wrap { margin: 0.1em auto 0.55em; width: 100%; }
    .pipe-svg { width: 100%; height: auto; display: block; font-family: 'Segoe UI', system-ui, sans-serif; }
    .pipe-hdr   { fill: #f2ede4; stroke: #8a7a52; stroke-width: 1.8; }
    .pipe-file  { fill: #faf7f1; stroke: var(--maroon); stroke-width: 1.8; }
    .pipe-obj   { fill: #eceae6; stroke: #7d7a73; stroke-width: 1.8; }
    .pipe-exe   { fill: #fbf1d8; stroke: var(--gold); stroke-width: 1.8; }
    .pipe-hdr-bar  { fill: #e6dcc8; stroke: none; }
    .pipe-file-bar { fill: #efe3e6; stroke: none; }
    .pipe-obj-bar  { fill: #dedbd5; stroke: none; }
    .pipe-exe-bar  { fill: #f3e2b6; stroke: none; }
    .pipe-name, .pipe-name-o, .pipe-name-h, .pipe-name-e {
      font-family: 'Fira Code','Consolas',monospace; font-weight: 700;
    }
    .pipe-name  { fill: var(--maroon); }
    .pipe-name-o{ fill: #4a4740; }
    .pipe-name-h{ fill: #6b5c34; }
    .pipe-name-e{ fill: #8a6d18; }
    .pipe-code  { font-family: 'Fira Code','Consolas',monospace; fill: #2f2f2f; }
    .pipe-cmd   { font-family: 'Fira Code','Consolas',monospace; fill: #8a857b; }
    .pipe-col   { fill: #8a857b; font-weight: 800; letter-spacing: .1em; }
    .pipe-inc-key { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #9a7d2e; }
    .pipe-kind  { fill: #8a8a82; }
    .pipe-stage { fill: var(--maroon); font-weight: 800; letter-spacing: .09em; }
    .pipe-sub   { fill: #a89b7d; font-style: italic; }
    .pipe-inc   { fill: #9a7d2e; font-style: italic; }
    /* ── Build model diagram: light boxes are files, maroon pills are tools ── */
    .bm-wrap { margin: 0.05em auto 0.2em; width: 91%; }
    .bm-svg  { width: 100%; height: auto; display: block; font-family: 'Segoe UI', system-ui, sans-serif; }
    .bm-cpp { fill: #faf7f1; stroke: var(--maroon); stroke-width: 1.8; }
    .bm-h   { fill: #f2ede4; stroke: #8a7a52; stroke-width: 1.8; }
    .bm-obj { fill: #eceae6; stroke: #7d7a73; stroke-width: 1.8; }
    .bm-exe { fill: #fbf1d8; stroke: var(--gold); stroke-width: 2; }
    .bm-lib { fill: #eceae6; stroke: #7d7a73; stroke-width: 1.6; }
    .bm-pill   { fill: var(--maroon); stroke: none; }
    .bm-pill-t { fill: #fdf8f0; font-weight: 700; letter-spacing: .04em; }
    .bm-name   { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #3a3630; }
    .bm-note   { fill: #8a857b; font-style: italic; }
    .bm-inc    { font-family: 'Fira Code','Consolas',monospace; font-weight: 700; fill: #9a7d2e; }
    .bm-dot    { fill: #b8b3a8; }
    .bm-arrow  { stroke: var(--gold); stroke-width: 2.4; }
    .bm-inc-arrow { stroke: #9a7d2e; stroke-width: 1.6; stroke-dasharray: 4 3; }

    /* ── Definition cards ── */
    .def-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
               gap: 1em; text-align: left; margin-bottom: 0.15em; }
    .def-card { background: #f7f3ec; border-top: 3px solid var(--gold);
                border-radius: 0 0 6px 6px; padding: 0.4em 0.7em 0.5em; }
    .def-name { font-family: 'Fira Code','Consolas',monospace; font-size: 0.52em;
                font-weight: 800; color: var(--maroon); }
    .def-name code { background: none; color: inherit; padding: 0; }
    .def-txt  { font-size: 0.5em; color: #444; margin: 0.15em 0 0; line-height: 1.35; }

    /* ── Data-flow cards: IN / OUT / IN-OUT ── */
    .flw-card { display: grid;
                grid-template-columns: 74px minmax(0,1.32fr) minmax(0,1fr);
                gap: 0.7em; align-items: center; margin: 0.3em 0; }
    .flw-badge { font-family: 'Fira Code','Consolas',monospace; font-weight: 800;
                 font-size: 0.4em; color: #fff; border-radius: 6px;
                 padding: 0.45em 0; text-align: center; letter-spacing: 0.06em; }
    .flw-in  { background: #2b6ea8; }
    .flw-out { background: #2f6f43; }
    .flw-io  { background: var(--maroon); }
    .flw-svg { width: 100%; height: auto; display: block;
               font-family: 'Segoe UI', system-ui, sans-serif; }
    .flw-box-c { fill: #eef4fb; stroke: #5f95c8; stroke-width: 2; }
    .flw-box-f { fill: #f7f3ec; stroke: var(--gold); stroke-width: 2; }
    .flw-lbl { fill: #8a857b; font-size: 11.5px; }
    .flw-t   { font-family: 'Fira Code','Consolas',monospace; fill: #3a3630; font-weight: 700; }
    .flw-cap { fill: #8a857b; font-style: italic; }
    .flw-ok  { fill: #2f6f43; font-weight: 700; }
    .flw-no  { fill: #b3261e; font-weight: 700; }
    .flw-arrow { stroke: #7d7a73; stroke-width: 2.4; }
    .flw-dead  { stroke: #d59a94; stroke-width: 2.2; stroke-dasharray: 5 4; }
    .flw-xbg   { fill: #fafaf8; }
    .flw-x     { fill: #b3261e; font-weight: 800; }
    /* a reference is not a second box: it is a name tag on the caller's box */
    .flw-tag    { fill: #f7f3ec; stroke: var(--gold); stroke-width: 2;
                  stroke-dasharray: 6 4; }
    .flw-lead   { stroke: var(--gold); stroke-width: 2.2; }
    .flw-dot    { fill: var(--gold); }
    .flw-nm     { font-family: 'Fira Code','Consolas',monospace; fill: #6a655c;
                  font-weight: 700; }
    .flw-old    { font-family: 'Fira Code','Consolas',monospace; fill: #b0aaa2;
                  font-weight: 700; }
    .flw-new    { font-family: 'Fira Code','Consolas',monospace; fill: #3a3630;
                  font-weight: 800; }
    .flw-strike { stroke: #b0aaa2; stroke-width: 1.8; }
    .flw-code { background: #272822; color: #f8f8f2; text-align: left;
                font-family: 'Fira Code','Consolas',monospace; font-size: 0.36em;
                line-height: 1.55; padding: 0.55em 0.75em; border-radius: 6px;
                white-space: pre; box-shadow: 0 3px 12px rgba(0,0,0,0.16); }
    .flw-kw { color: #f92672; }
    .flw-ty { color: #66d9ef; }
    .flw-fn { color: #a6e22e; }
    .flw-cm { color: #8f8b7f; font-style: italic; }
    .flw-nu { color: #ae81ff; }

    /* ── Prototype anatomy: labeled parts of a signature ──
       The labels are absolutely positioned so they never push the tokens
       apart: the code line has to read as one continuous line. ── */
    .pa-block {
      background: #272822; border-radius: 8px;
      box-shadow: 0 4px 18px rgba(0,0,0,0.18);
      padding: 0.55em 0.9em 0.5em; margin: 0.35em auto 0;
      font-family: 'Fira Code','Consolas',monospace; color: #f8f8f2;
      text-align: center;
    }
    .pa-line { font-size: 0.62em; white-space: pre; line-height: 1.1; }
    .pa-line-lbl { padding-bottom: 3.4em; }
    .pa-part { position: relative; display: inline-block; }
    .pa-tok  { border-bottom: 3px solid; padding-bottom: 1px; }
    .pa-ret  { border-color: #7cb6e8; color: #a6dcff; }
    .pa-name { border-color: #e8c46a; color: #ffe08a; }
    .pa-args { border-color: #f0938b; color: #ffb3ac; }
    .pa-end  { border-color: #9be36b; color: #b6f08f; }
    .pa-lbl {
      position: absolute; left: 50%; transform: translateX(-50%);
      top: 4em; white-space: nowrap; font-size: 0.5em; font-style: italic;
      color: #c9c4b8;
    }
    /* every tick starts below the token's underline, never inside it */
    .pa-lbl::before {
      content: ''; position: absolute; left: 50%; top: -1.05em; width: 1px;
      height: 1.05em; background: #6f6b62;
    }
    /* each label wears its part's color, so eye jumps straight to the token */
    .pa-l-ret  { color: #7cb6e8; }
    .pa-l-name { color: #e8c46a; }
    .pa-l-args { color: #f0938b; }
    .pa-l-end  { color: #9be36b; }
    .pa-l-ret::before  { background: #7cb6e8; }
    .pa-l-name::before { background: #e8c46a; }
    .pa-l-args::before { background: #f0938b; }
    .pa-l-end::before  { background: #9be36b; }
    .pa-lbl-lo { top: 6.15em; }
    .pa-lbl-lo::before { height: 3.2em; top: -3.2em; }
    .pa-sep {
      font-family: 'Segoe UI', system-ui, sans-serif; font-style: italic;
      font-size: 0.42em; color: #a09b91; margin: 0.5em 0 0.35em;
    }
    .pa-dim { color: #8f8b7f; }

    /* ── File stack: one row per file, filename left, caption right ──
       display:contents dissolves the per-file wrapper so the filename, the
       code panel and the caption become grid items of the SAME row, which is
       what keeps the three columns aligned. ── */
    .three-col { display: grid;
                 grid-template-columns: minmax(0,0.52fr) minmax(0,2.1fr) minmax(0,1.3fr);
                 gap: 0.45em 1em; align-items: center; margin-top: 0.25em; }
    .three-col > div { display: contents; }
    .three-col h3 { font-size: 0.5em; margin: 0; text-align: right;
                    font-family: 'Fira Code','Consolas',monospace; color: var(--maroon); }
    .three-col pre { margin: 0; }
    .three-col .fc-note { font-size: 0.42em; color: #6a655c; margin: 0;
                          line-height: 1.35; text-align: left; }

    /* ── Cards that point at a numbered line of the code above ── */
    .ln-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
              gap: 1.1em; text-align: left; margin-top: 0.45em; }
    .ln-card { background: #f7f3ec; border-left: 4px solid var(--gold);
               border-radius: 0 8px 8px 0; padding: 0.5em 0.9em 0.55em; }
    .ln-card-b { background: #eef4fb; border-left-color: #5f95c8; }
    .ln-head { display: flex; align-items: baseline; gap: 0.55em; margin-bottom: 0.2em; }
    .ln-term { font-family: 'Fira Code','Consolas',monospace; font-weight: 800;
               font-size: 0.6em; color: var(--maroon); }
    .ln-card-b .ln-term { color: #2c5f8a; }
    .ln-chip { font-family: 'Fira Code','Consolas',monospace; font-size: 0.4em;
               font-weight: 700; letter-spacing: 0.04em; background: #3a3630;
               color: #f4f1e8; border-radius: 999px; padding: 0.2em 0.65em;
               white-space: nowrap; }
    .ln-txt { font-size: 0.54em; color: #3f3b34; line-height: 1.45; margin: 0; }
    .reveal .ln-txt code { font-size: 0.95em; }

    .err-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.1em; text-align: left; }
    .err-card {
      background: #fdf0f2; border-left: 4px solid #b3261e;
      border-radius: 0 6px 6px 0; padding: 0.45em 0.75em;
    }
    .err-when { font-size: 0.5em; font-weight: 800; letter-spacing: .07em;
                text-transform: uppercase; color: #b3261e; }
    .err-msg  { font-family: 'Fira Code','Consolas',monospace; font-size: 0.5em;
                color: #333; margin: 0.18em 0; word-break: break-word; }
    .err-why  { font-size: 0.5em; color: #555; margin: 0; line-height: 1.35; }

    /* ── Long code blocks: show every line, never scroll ── */
    .reveal pre.code-fit { font-size: 0.54em !important; }
    .reveal pre.code-fit code { max-height: none !important; overflow: visible !important; }


    /* ── Demo slide ── */
    .demo-slide h1 {
      color: #fff !important; font-size: 3.1em !important;
      border: none !important; margin: 0 0 0.05em !important; letter-spacing: -0.02em;
    }
    .demo-rule { width: 110px; height: 5px; background: var(--gold);
                 border-radius: 3px; margin: 0 auto 0.5em; }
    .demo-art { width: 330px; height: auto; display: block; margin: 0 auto; }
    .demo-cap { color: var(--gold); font-size: 0.62em; font-style: italic; margin-top: 0.55em; }
    .demo-sub { color: rgba(255,255,255,0.45); font-size: 0.45em; margin-top: 0.25em; }


    /* ── Part divider: marks a section as optional / read-on-your-own ── */
    .part-slide h1 {
      color: #fff !important; font-size: 2.2em !important;
      border: none !important; margin: 0 0 0.05em !important; letter-spacing: -0.02em;
    }
    .part-slide h1 code {
      background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28);
      color: var(--gold);
    }
    .part-tag {
      display: inline-block; background: var(--gold); color: #3a2a06;
      font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
      font-size: 0.4em; padding: 0.35em 0.95em; border-radius: 999px;
      margin-bottom: 0.7em;
    }
    .part-slide .demo-rule { margin-top: 0.45em; }
    /* .reveal p beats a bare .part-note on specificity, so qualify both */
    .reveal .part-sub  { color: var(--gold); font-size: 0.68em; font-style: italic;
                         margin: 0.5em auto 0; }
    .reveal .part-note { color: rgba(255,255,255,0.62); font-size: 0.48em;
                         line-height: 1.55; max-width: 74%; margin: 0.55em auto 0; }

    /* ── Comic break slides ── */
    .comic-slide h2 { color: #fff !important; border-bottom-color: rgba(255,255,255,.35) !important;
                      font-size: 1.15em !important; margin-bottom: 0.35em !important; }
    .comic-card { background: #fff; border-radius: 10px; padding: 14px;
                  box-shadow: 0 8px 26px rgba(0,0,0,.28); display: inline-block; max-width: 92%; }
    .comic-card img { display: block; width: 100%; height: auto; border-radius: 4px; }
    .comic-cap { color: var(--gold); font-size: 0.55em; font-style: italic; margin-top: 0.5em; }
    .comic-credit { color: rgba(255,255,255,0.4); font-size: 0.38em; margin-top: 0.2em; }


    .credit-line {
      color: rgba(255,255,255,0.55);
      font-size: 0.4em;
      margin-top: 1.1em;
      line-height: 1.5;
      border-top: 1px solid rgba(255,255,255,0.18);
      padding-top: 0.6em;
      display: inline-block;
    }
    .credit-line strong { color: rgba(255,255,255,0.8); font-weight: 600; }

    /* ── Title slide ── */
    .title-wrap {
      position: relative;
      width: 960px; height: 700px;
      margin: 0 auto;
      overflow: hidden;
      display: flex; flex-direction: column; justify-content: center;
      text-align: left;
    }
    .title-watermark {
      position: absolute;
      right: 34px; top: 50%;
      transform: translateY(-50%);
      height: 56%;
      opacity: 0.30;
      pointer-events: none; user-select: none;
    }
    .title-watermark .calvin-svg { height: 100%; width: auto; display: block; }
    .title-text { position: relative; padding-left: 78px; max-width: 452px; }
    .title-text p { margin: 0; }
    .title-code {
      font-size: 96px; line-height: 0.95; font-weight: 800;
      color: #fff; letter-spacing: -0.03em;
    }
    .title-course {
      color: var(--gold); font-size: 25px; font-weight: 600; margin-top: 10px !important;
    }
    .title-rule {
      width: 96px; height: 5px; background: var(--gold);
      border-radius: 3px; margin: 30px 0 26px;
    }
    .title-week {
      color: rgba(255,255,255,0.72); font-size: 19px; font-weight: 700;
      letter-spacing: 0.24em; text-transform: uppercase;
    }
    .title-topic {
      color: #fff; font-size: 42px; font-weight: 700;
      margin-top: 8px !important; line-height: 1.1;
    }
    .title-author {
      margin-top: 52px !important; color: #fff; font-size: 22px; font-weight: 600;
    }
    .title-meta {
      color: rgba(255,255,255,0.5); font-size: 15px; margin-top: 7px !important;
    }

    /* ── Closing slide ── */
    .closing-slide h2 { color: white !important; }
    .closing-slide ul { color: rgba(255,255,255,0.9); }
    .closing-slide .next { color: var(--gold); font-size: 0.6em; margin-top: 1.5em; }

    /* a code block never widens its column */
    .reveal pre { max-width: 100%; }
    .reveal pre code { overflow-x: auto; }

    /* ── Linked-list diagrams ── */
    .ll-svg { width: 100%; height: auto; display: block; margin: 0.4em auto 0.2em;
              font-family: 'Fira Code','Consolas',monospace; }
    .ll-node  { fill: var(--cream); stroke: var(--maroon); stroke-width: 2.5; }
    .ll-split { stroke: var(--maroon); stroke-width: 1.5; opacity: .55; }
    .ll-val   { fill: var(--maroon); font-size: 20px; font-weight: 700; }
    .ll-link  { stroke: var(--gold); stroke-width: 2.5; }
    .ll-dot   { fill: var(--maroon); }
    .ll-null  { fill: #8a8a82; font-size: 13px; font-style: italic; }
    .ll-lbl   { fill: var(--gold); font-size: 14px; font-weight: 700; }

    /* ── Tree diagrams ── */
    .tree-svg { width: 100%; height: auto; display: block; margin: 0.3em auto;
                font-family: 'Fira Code','Consolas',monospace; }
    .tree-node { fill: var(--cream); stroke: var(--maroon); stroke-width: 2.5; }
    .tree-hi   { fill: #fbf0d5; stroke: var(--gold); stroke-width: 3.5; }
    .tree-lbl  { fill: var(--maroon); font-size: 17px; font-weight: 700; }
    .tree-edge { stroke: var(--gold); stroke-width: 2.5; }

    /* ── Growth curves ── */
    .growth-svg { width: 100%; height: auto; display: block; margin: 0.2em auto;
                  font-family: 'Segoe UI', system-ui, sans-serif; }
    .growth-svg .axis { stroke: #b5b0a6; stroke-width: 2; }
    .growth-svg .axis-lbl { fill: #8a857b; font-size: 12px; font-style: italic; }
    .growth-svg .curve { fill: none; stroke-width: 3; }
    .growth-svg .curve-lbl { font-size: 12px; font-weight: 700; }
    .growth-svg .c1 { stroke: #4a8f5b; } .growth-svg .c1-t { fill: #4a8f5b; }
    .growth-svg .c2 { stroke: #2f7d9e; } .growth-svg .c2-t { fill: #2f7d9e; }
    .growth-svg .c3 { stroke: var(--gold); } .growth-svg .c3-t { fill: #9a7d2e; }
    .growth-svg .c4 { stroke: #b5652a; } .growth-svg .c4-t { fill: #b5652a; }
    .growth-svg .c5 { stroke: var(--maroon); } .growth-svg .c5-t { fill: var(--maroon); }

    /* ── Full-screen hint (see slides/fullscreen.js) ──
       Shown only on decks opened with ?fs=1, until the first gesture. ── */
    .fs-hint {
      position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
      z-index: 60; pointer-events: none;
      background: rgba(20,18,16,0.62); color: rgba(255,255,255,0.92);
      font-family: 'Segoe UI', system-ui, sans-serif; font-size: 12px;
      letter-spacing: 0.1em; text-transform: uppercase;
      padding: 7px 15px; border-radius: 999px;
      animation: fsHintIn 0.5s ease-out both;
      transition: opacity 1.2s ease;
    }
    .fs-hint-dim { opacity: 0.25; }
    @keyframes fsHintIn { from { opacity: 0; transform: translate(-50%, 8px); }
                          to   { opacity: 1; transform: translate(-50%, 0); } }

/* ── The read-position walk (week 02, "Watch the Read Position") ──────────
   Four snapshots of the same file with the read position marked, ending on
   the read that fails. It exists because "the read fails" is the whole idea
   behind `while (getline(fin, line))` and a sentence cannot show it
   happening: a student has to see the position move, and then see the
   fourth attempt come back with nothing.
   ------------------------------------------------------------------------ */
.eof-walk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6em;
  margin: 0.5em 0 0.6em;
  align-items: start;
}
.eof-step {
  border: 1px solid var(--bs-border-color, #d8ccd0);
  border-radius: 6px;
  padding: 0.45em 0.5em 0.55em;
  background: rgba(110, 28, 46, 0.03);
}
.eof-cap {
  font-size: 0.34em;
  color: var(--maroon, #6E1C2E);
  font-weight: 700;
  margin-bottom: 0.35em;
  min-height: 2.2em;
}
.eof-file {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.34em !important;
  line-height: 1.5;
  margin: 0 0 0.4em;
  padding: 0.4em 0.3em;
  background: #14161C;
  color: #E4E7EC;
  border-radius: 4px;
  white-space: pre;
  text-align: left;
  box-shadow: none;
}
.eof-cur  { color: var(--gold, #C49A2C); font-weight: 700; }
.eof-mark { color: #8B7B7F; }
.eof-res  { font-size: 0.32em; color: var(--bs-secondary-color, #6B5A5E); }

/* the read that fails: the one frame worth marking */
.eof-fail { border-color: var(--maroon, #6E1C2E); border-width: 2px; }
.eof-fail .eof-res { color: var(--maroon, #6E1C2E); font-weight: 700; }

.eof-note { font-size: 0.38em; line-height: 1.45; margin: 0.2em 0 0; }

/* a one-line setup sentence above a figure */
.reveal .lede { font-size: 0.4em; line-height: 1.45; margin: 0 0 0.5em; }

/* The row that answers the TTYN before it, in the same green the answer box
   uses, so "this is the right one" reads the same way in both places. */
.reveal table tr.ttyn-right td {
  background: rgba(47, 111, 67, 0.09);
  border-top: 1px solid #2f6f43;
  border-bottom: 1px solid #2f6f43;
}
.reveal table tr.ttyn-right td:first-child { color: #2f6f43; }