From 9d54f16c8466601447c5428049d9b47822ff82a7 Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Thu, 30 Apr 2026 22:25:39 +0500
Subject: [PATCH] insert "Models are stateless" slide at position 10 in
 best-practice deck
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a styled-HTML dialog diagram (User vs Model bubbles, dashed amber
divider labeled "new session — context wiped", and a two-line caption
strip) to make the stateless behavior of LLMs visible. Drawn rather than
imported as PNG, mirroring slide-12's inline-diagram conventions. Old
slides 10..48 shifted to 11..49 via sentinel-replacement; banner
comments updated in the same pass to keep the deck's zero-drift state.
No new CSS classes — all layout via inline styles consistent with
surrounding slides.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../claude-code-best-practice/index.html      | 168 ++++++++++++------
 1 file changed, 117 insertions(+), 51 deletions(-)

diff --git a/presentation/claude-code-best-practice/index.html b/presentation/claude-code-best-practice/index.html
index 84d807a..adb102e 100644
--- a/presentation/claude-code-best-practice/index.html
+++ b/presentation/claude-code-best-practice/index.html
@@ -487,9 +487,75 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 10: Model Limitations &mdash; Real-time access          -->
+    <!-- SLIDE 10: Models are stateless                               -->
     <!-- ============================================================ -->
     <div class="slide" data-slide="10">
+        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
+
+            <!-- Title -->
+            <h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.4rem; margin-bottom: 32px;">&#x1F4AC; Models are stateless</h1>
+
+            <!-- Dialog diagram — two-column conversation -->
+            <div style="max-width: 700px; width: 100%; margin: 0 auto 28px;">
+
+                <!-- Column headers -->
+                <div style="display: flex; justify-content: space-between; margin-bottom: 14px; padding: 0 24px;">
+                    <span style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #1565c0; background: rgba(21,101,192,0.08); border: 1px solid rgba(21,101,192,0.2); padding: 4px 16px; border-radius: 999px;">User</span>
+                    <span style="font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #7b1fa2; background: rgba(123,31,162,0.08); border: 1px solid rgba(123,31,162,0.2); padding: 4px 16px; border-radius: 999px;">Model</span>
+                </div>
+
+                <!-- Turn 1: User → Model -->
+                <div style="display: flex; justify-content: flex-start; margin-bottom: 10px;">
+                    <div style="background: #e3f2fd; border: 1px solid #90caf9; border-radius: 18px 18px 18px 4px; padding: 12px 18px; max-width: 62%; text-align: left; position: relative;">
+                        <span style="font-size: 1rem; color: #1a1a1a;">&ldquo;My name is Shayan.&rdquo;</span>
+                        <span style="display: block; font-size: 0.7rem; color: #888; margin-top: 4px; text-align: right;">&#x279C; to model</span>
+                    </div>
+                </div>
+
+                <!-- Turn 2: Model → User -->
+                <div style="display: flex; justify-content: flex-end; margin-bottom: 20px;">
+                    <div style="background: #f3e5f5; border: 1px solid #ce93d8; border-radius: 18px 18px 4px 18px; padding: 12px 18px; max-width: 62%; text-align: left; position: relative;">
+                        <span style="font-size: 1rem; color: #1a1a1a;">&ldquo;Okay, your name is Shayan.&rdquo;</span>
+                        <span style="display: block; font-size: 0.7rem; color: #888; margin-top: 4px;">&#x279C; to user</span>
+                    </div>
+                </div>
+
+                <!-- Divider: new session / context wiped -->
+                <div style="display: flex; align-items: center; gap: 12px; margin: 4px 0 20px;">
+                    <div style="flex: 1; border-top: 2px dashed #e0a020; opacity: 0.7;"></div>
+                    <span style="font-size: 0.75rem; font-weight: 600; color: #e0a020; background: #fff8e1; border: 1px solid #ffe082; padding: 3px 12px; border-radius: 999px; white-space: nowrap;">new session &mdash; context wiped</span>
+                    <div style="flex: 1; border-top: 2px dashed #e0a020; opacity: 0.7;"></div>
+                </div>
+
+                <!-- Turn 3: User → Model -->
+                <div style="display: flex; justify-content: flex-start; margin-bottom: 10px;">
+                    <div style="background: #e3f2fd; border: 1px solid #90caf9; border-radius: 18px 18px 18px 4px; padding: 12px 18px; max-width: 62%; text-align: left;">
+                        <span style="font-size: 1rem; color: #1a1a1a;">&ldquo;What is my name?&rdquo;</span>
+                        <span style="display: block; font-size: 0.7rem; color: #888; margin-top: 4px; text-align: right;">&#x279C; to model</span>
+                    </div>
+                </div>
+
+                <!-- Turn 4: Model → User (can't remember) -->
+                <div style="display: flex; justify-content: flex-end; margin-bottom: 0;">
+                    <div style="background: #fce4ec; border: 1px solid #f48fb1; border-radius: 18px 18px 4px 18px; padding: 12px 18px; max-width: 72%; text-align: left;">
+                        <span style="font-size: 1rem; color: #1a1a1a;">&ldquo;I don&rsquo;t know your name &mdash; each conversation starts fresh.&rdquo;</span>
+                        <span style="display: block; font-size: 0.7rem; color: #888; margin-top: 4px;">&#x279C; to user</span>
+                    </div>
+                </div>
+
+            </div>
+
+            <!-- Caption strip — mirrors slide-12 pattern -->
+            <p style="font-size: 1.6rem; font-weight: 700; color: #1a1a1a; margin: 8px 0 4px; letter-spacing: -0.02em; line-height: 1.2;">Each call starts from zero.</p>
+            <p style="font-size: 1.1rem; font-weight: 400; color: #C0392B; margin: 0; letter-spacing: 0.01em;">Memory only exists if the harness replays the transcript.</p>
+
+        </div>
+    </div>
+
+    <!-- ============================================================ -->
+    <!-- SLIDE 11: Model Limitations &mdash; Real-time access          -->
+    <!-- ============================================================ -->
+    <div class="slide" data-slide="11">
         <h1>&#x1F9E0; Models &mdash; e.g. Opus, GPT, Gemini</h1>
         <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 40px 0;">
             <div class="col-card" style="border-left: 4px solid #4caf50;">
@@ -526,9 +592,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 11: Limitations                                         -->
+    <!-- SLIDE 12: Limitations                                         -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="11">
+    <div class="slide" data-slide="12">
         <h1>&#x1F9E0; Limitations</h1>
         <p>The raw model has <strong>no real-time access</strong> &mdash; no internet, no files, no clock.</p>
         <div style="text-align: center; margin: 24px 0;">
@@ -537,9 +603,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 12: Horse Harness — The Pivot Analogy                  -->
+    <!-- SLIDE 13: Horse Harness — The Pivot Analogy                  -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="12">
+    <div class="slide" data-slide="13">
         <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center; gap: 0;">
 
             <!-- SVG Horse with Harness — annotated callout version -->
@@ -701,9 +767,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 13: Tool Calling &mdash; how the harness reaches the world -->
+    <!-- SLIDE 14: Tool Calling &mdash; how the harness reaches the world -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="13">
+    <div class="slide" data-slide="14">
         <h1>&#x26A1; Tool Calling &mdash; how the harness reaches the world</h1>
         <div style="text-align: center; margin: 24px 0;">
             <img src="../assets/harness/tool-calling.png"
@@ -713,9 +779,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 14: Harness (1 of 2) &mdash; mind, methods, memory       -->
+    <!-- SLIDE 15: Harness (1 of 2) &mdash; mind, methods, memory       -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="14">
+    <div class="slide" data-slide="15">
         <h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
         <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
             <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #009688; text-align: center;">
@@ -758,9 +824,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 15: Harness (2 of 2) &mdash; senses, rules, reflexes     -->
+    <!-- SLIDE 16: Harness (2 of 2) &mdash; senses, rules, reflexes     -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="15">
+    <div class="slide" data-slide="16">
         <h1>&#x1F4AA; Harness &mdash; the body around the brain</h1>
         <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0;">
             <div class="col-card" style="flex: 0 1 calc(33.333% - 12px); border-left: 4px solid #4caf50; text-align: center;">
@@ -795,9 +861,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 16: Problem solved with harness &mdash; success case     -->
+    <!-- SLIDE 17: Problem solved with harness &mdash; success case     -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="16">
+    <div class="slide" data-slide="17">
         <h1>&#x1F389; Yayyyyy! Problem solved with harness</h1>
         <p>The harness reaches out via <strong>WebSearch</strong> and fetches a real answer from live sources.</p>
         <div style="text-align: center; margin: 24px 0;">
@@ -806,9 +872,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 17: Suspense / transition &mdash; But...?                -->
+    <!-- SLIDE 18: Suspense / transition &mdash; But...?                -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="17">
+    <div class="slide" data-slide="18">
         <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 75vh; text-align: center;">
             <div style="font-size: 12rem; color: #3f51b5; line-height: 1; font-weight: 700;">?</div>
             <p style="font-size: 1.6rem; color: #555; margin: 24px 0 0; max-width: 900px; font-weight: 600;">Really?</p>
@@ -816,9 +882,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 18: Non-determinism 1 &mdash; Refuses to use tools       -->
+    <!-- SLIDE 19: Non-determinism 1 &mdash; Refuses to use tools       -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="18">
+    <div class="slide" data-slide="19">
         <h1>&#x1F4AA; Non-determinism &mdash; Doesn&rsquo;t always use its tools</h1>
         <p>Similar prompt &mdash; but this time <strong>the model decided not to use the tool</strong>.</p>
         <div style="text-align: center; margin: 24px 0;">
@@ -827,9 +893,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 19: Non-determinism 2 &mdash; Tools can fail             -->
+    <!-- SLIDE 20: Non-determinism 2 &mdash; Tools can fail             -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="19">
+    <div class="slide" data-slide="20">
         <h1>&#x1F4AA; Non-determinism &mdash; Tools can fail</h1>
         <p>The model first tried <strong>one source</strong> &mdash; it <strong>failed (403)</strong> &mdash; so it fell back to <strong>another</strong>.</p>
         <div style="text-align: center; margin: 24px 0;">
@@ -838,9 +904,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 20: The Two Problems &mdash; what we're solving          -->
+    <!-- SLIDE 21: The Two Problems &mdash; what we're solving          -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="20">
+    <div class="slide" data-slide="21">
         <h1>&#x1F6A8; Problem Statement</h1>
         <ol style="padding-left: 32px; margin: 40px 0 0 0; line-height: 2;">
             <li style="font-size: 1.25rem; color: #444; margin-bottom: 24px;">
@@ -855,9 +921,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 21: Vibe Coding &mdash; Karpathy&rsquo;s original tweet  -->
+    <!-- SLIDE 22: Vibe Coding &mdash; Karpathy&rsquo;s original tweet  -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="21">
+    <div class="slide" data-slide="22">
         <h1>Vibe Coding</h1>
         <div style="text-align: center; margin: 16px 0;">
             <img src="../assets/concepts/vibe-coding.jpg" alt="Andrej Karpathy's Feb 3 2025 tweet coining 'vibe coding' — 'fully give in to the vibes, embrace exponentials, and forget that the code even exists'" style="max-width: 100%; max-height: 55vh; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.12);" />
@@ -866,9 +932,9 @@
     </div>
 
     <!-- ============================================================ -->
-    <!-- SLIDE 22: Vibe Coding vs Agentic Engineering                   -->
+    <!-- SLIDE 23: Vibe Coding vs Agentic Engineering                   -->
     <!-- ============================================================ -->
-    <div class="slide" data-slide="22">
+    <div class="slide" data-slide="23">
         <h1>Vibe Coding vs Agentic Engineering</h1>
         <div class="two-col">
             <div>
@@ -937,7 +1003,7 @@ todoapp/
     <!-- ============================================================ -->
 
     <!-- Slide 8: Agents Section Divider -->
-    <div class="slide section-slide" data-slide="23" data-level="agents">
+    <div class="slide section-slide" data-slide="24" data-level="agents">
         <div class="slide-viewport-content">
             <h1>👤 Agents</h1>
             <div style="text-align: center; margin: 12px auto 20px auto;">
@@ -995,7 +1061,7 @@ todoapp/
     </div>
 
     <!-- Slide 9: The Restaurant Kitchen -->
-    <div class="slide" data-slide="24">
+    <div class="slide" data-slide="25">
         <div style="min-height: calc(100vh - 120px);">
             <h1>Create your first agent &mdash; <code>/agents</code></h1>
             <div style="max-width: 600px;">
@@ -1049,7 +1115,7 @@ todoapp/
     </div>
 
     <!-- Slide 10: Prompting vs Agent table -->
-    <div class="slide" data-slide="25">
+    <div class="slide" data-slide="26">
         <div style="min-height: calc(100vh - 120px);">
             <h1>Demo</h1>
             <video
@@ -1100,7 +1166,7 @@ todoapp/
     </div>
 
     <!-- Slide: Agent Created (image only) -->
-    <div class="slide" data-slide="26" data-level="agents">
+    <div class="slide" data-slide="27" data-level="agents">
         <h1>&#x1F389; Yayyyyy! Problem solved with agents</h1>
         <div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
             <img src="../assets/concepts/agents/agent-created.png" alt="Agent created" style="max-width: 1200px; max-height: 80vh; width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1);" />
@@ -1145,7 +1211,7 @@ todoapp/
     </div>
 
     <!-- Slide 27: Skeptical counter-beat (mirrors slide 17) -->
-    <div class="slide" data-slide="27" data-level="agents">
+    <div class="slide" data-slide="28" data-level="agents">
         <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 120px); text-align: center;">
             <div style="font-size: 12rem; color: #3f51b5; line-height: 1; font-weight: 700;">?</div>
             <p style="font-size: 1.6rem; color: #555; margin: 24px 0 0; max-width: 900px; font-weight: 600;">Not so fast...</p>
@@ -1190,7 +1256,7 @@ todoapp/
     </div>
 
     <!-- Slide 28: Callback to problem statement — agents solve half -->
-    <div class="slide" data-slide="28" data-level="agents">
+    <div class="slide" data-slide="29" data-level="agents">
         <h1>&#x1F6A8; Problem Statement</h1>
         <div style="min-height: calc(100vh - 120px);">
         <ol style="padding-left: 32px; margin: 40px 0 0 0; line-height: 2;">
@@ -1244,7 +1310,7 @@ todoapp/
     </div>
 
     <!-- Slide 13: Agent Config Fields -->
-    <div class="slide" data-slide="29" data-level="agents">
+    <div class="slide" data-slide="30" data-level="agents">
             <h1>Agent config fields with frontmatter</h1>
             <div style="margin: 24px 0;">
                 <div class="field-row" style="padding-bottom: 6px; border-bottom: 2px solid #ddd;">
@@ -1334,7 +1400,7 @@ todoapp/
     </div>
 
     <!-- Slide 30: Agent tips and tricks — part 1 -->
-    <div class="slide" data-slide="30" data-level="agents">
+    <div class="slide" data-slide="31" data-level="agents">
         <h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
         <div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
             <img src="../assets/concepts/agents/agent-tips-1.png" alt="Claude Code tips and tricks — part 1" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1379,7 +1445,7 @@ todoapp/
     </div>
 
     <!-- Slide 31: Agent tips and tricks — part 2 -->
-    <div class="slide" data-slide="31" data-level="agents">
+    <div class="slide" data-slide="32" data-level="agents">
         <h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
         <div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
             <img src="../assets/concepts/agents/agent-tips-2.png" alt="Claude Code tips and tricks — part 2" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1428,7 +1494,7 @@ todoapp/
     <!-- ============================================================ -->
 
     <!-- Slide 32: CLAUDE.md concept intro -->
-    <div class="slide section-slide" data-slide="32">
+    <div class="slide section-slide" data-slide="33">
         <div class="slide-viewport-content">
             <h1>&#x1F4DD; CLAUDE.md</h1>
             <div style="text-align: center; margin: 12px auto 20px auto;">
@@ -1484,7 +1550,7 @@ todoapp/
     </div>
 
     <!-- Slide 33: Create your first CLAUDE.md — /init -->
-    <div class="slide" data-slide="33" data-level="claude-md">
+    <div class="slide" data-slide="34" data-level="claude-md">
         <div style="min-height: calc(100vh - 120px);">
             <h1>Create your first CLAUDE.md &mdash; <code>/init</code></h1>
             <div style="max-width: 600px;">
@@ -1538,7 +1604,7 @@ todoapp/
     </div>
 
     <!-- Slide 34: CLAUDE.md — the real thing (screenshot) -->
-    <div class="slide" data-slide="34" data-level="claude-md">
+    <div class="slide" data-slide="35" data-level="claude-md">
         <div style="min-height: calc(100vh - 120px);">
             <h1>&#x1F4DD; CLAUDE.md &mdash; the real thing</h1>
             <div style="display: flex; align-items: center; justify-content: center;">
@@ -1585,7 +1651,7 @@ todoapp/
     </div>
 
     <!-- Slide 35: claude-code-best-practice Tips & Tricks (CLAUDE.md) -->
-    <div class="slide" data-slide="35" data-level="claude-md">
+    <div class="slide" data-slide="36" data-level="claude-md">
         <h1><code>claude-code-best-practice</code> Tips &amp; Tricks</h1>
         <div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
             <img src="../assets/concepts/claudemd/claudemd-tips.png" alt="Claude Code tips and tricks for CLAUDE.md" style="max-width: 1200px; max-height: 80vh; width: auto; height: auto; display: block; margin: 20px auto 0 auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.1); object-fit: contain;" />
@@ -1630,7 +1696,7 @@ todoapp/
     </div>
 
     <!-- Slide 36: CLAUDE.md problem — keep it under 200 lines -->
-    <div class="slide" data-slide="36" data-level="claude-md">
+    <div class="slide" data-slide="37" data-level="claude-md">
         <div style="min-height: calc(100vh - 120px);">
             <h1>&#x26A0;&#xFE0F; CLAUDE.md problem &mdash; keep it under 200 lines</h1>
             <div style="min-height: calc(100vh - 200px); display: flex; align-items: center; justify-content: center;">
@@ -1681,7 +1747,7 @@ todoapp/
     <!-- ============================================================ -->
 
     <!-- Slide: Skills -->
-    <div class="slide section-slide" data-slide="37">
+    <div class="slide section-slide" data-slide="38">
         <div class="slide-viewport-content">
             <h1>&#x1F3AF; Skills</h1>
             <div style="text-align: center; margin: 12px auto 20px auto;">
@@ -1742,7 +1808,7 @@ todoapp/
     <!-- NEW SLIDE 38: Create your first skill                         -->
     <!-- ============================================================ -->
 
-    <div class="slide" data-slide="38" data-level="skills">
+    <div class="slide" data-slide="39" data-level="skills">
         <div style="min-height: calc(100vh - 120px);">
             <h1>Create your first skill</h1>
             <div class="two-col" style="margin-top: 28px;">
@@ -1805,7 +1871,7 @@ todoapp/
     <!-- Slide 39: Skills — a real one (screenshot)                    -->
     <!-- ============================================================ -->
 
-    <div class="slide" data-slide="39" data-level="skills">
+    <div class="slide" data-slide="40" data-level="skills">
         <div style="min-height: calc(100vh - 200px);">
             <h1>&#x1F3AF; Skills &mdash; a real one</h1>
             <div style="display: flex; align-items: center; justify-content: center;">
@@ -1855,7 +1921,7 @@ todoapp/
     <!-- Slide 40: Skill config fields with frontmatter (was 39)       -->
     <!-- ============================================================ -->
 
-    <div class="slide" data-slide="40" data-level="skills">
+    <div class="slide" data-slide="41" data-level="skills">
         <h1>Skill config fields with frontmatter</h1>
         <p style="font-style: italic; color: #666; margin: 8px 0 20px 0;">Most fields control how and when the skill loads &mdash; enforced by the harness. Only <code>description</code> lives in prompt-land.</p>
         <div style="margin: 0 0 24px 0;">
@@ -1950,7 +2016,7 @@ todoapp/
     <!-- ============================================================ -->
 
     <!-- Slide: Context -->
-    <div class="slide section-slide" data-slide="41">
+    <div class="slide section-slide" data-slide="42">
         <div class="slide-viewport-content">
             <h1>&#x1F4AD; Context</h1>
             <div style="text-align: center; margin: 12px auto 20px auto;">
@@ -2009,7 +2075,7 @@ todoapp/
     </div>
 
     <!-- Slide 42: Context — Claude's Brain -->
-    <div class="slide" data-slide="42" data-level="context">
+    <div class="slide" data-slide="43" data-level="context">
         <div style="min-height: calc(100vh - 120px);">
             <h1>&#x1F9E0; Claude's Brain</h1>
             <div class="analogy-box">
@@ -2085,7 +2151,7 @@ todoapp/
     </div>
 
     <!-- Slide 43: Context — What Loads at Session Start -->
-    <div class="slide" data-slide="43" data-level="context">
+    <div class="slide" data-slide="44" data-level="context">
         <div style="min-height: calc(100vh - 120px);">
             <h1>What Loads at Session Start</h1>
             <p>The moment you open Claude Code, certain things land in Claude's brain <strong>before you've typed a word</strong>. The rest waits in the wings &mdash; only loaded when you actually need it. This is called <strong>progressive disclosure</strong>.</p>
@@ -2158,7 +2224,7 @@ todoapp/
     </div>
 
     <!-- Slide 44: Context — Lost in the Middle (Liu et al., Stanford 2023) -->
-    <div class="slide" data-slide="44" data-level="context">
+    <div class="slide" data-slide="45" data-level="context">
         <div style="min-height: calc(100vh - 120px);">
             <h1 style="text-align: center;">&#x1F4C4; Lost in the Middle</h1>
             <p style="text-align: center; color: #666; font-style: italic; font-size: 1.1rem; margin-top: -20px; margin-bottom: 30px;">by Nelson F. Liu &middot; Stanford University &middot; 2023</p>
@@ -2232,7 +2298,7 @@ todoapp/
     </div>
 
     <!-- Slide 45: Workflow concept-intro -->
-    <div class="slide section-slide" data-slide="45" data-level="workflow">
+    <div class="slide section-slide" data-slide="46" data-level="workflow">
         <div class="slide-viewport-content">
             <h1>&#x1F4D8; Workflow</h1>
             <div style="text-align: center; margin: 12px auto 20px auto;">
@@ -2285,7 +2351,7 @@ todoapp/
     </div>
 
     <!-- Slide 46: Orchestration Workflow diagram -->
-    <div class="slide" data-slide="46" data-level="workflow">
+    <div class="slide" data-slide="47" data-level="workflow">
         <div style="min-height: calc(100vh - 120px);">
             <h1>&#x1F4CB; Orchestration Workflow</h1>
             <img src="../../orchestration-workflow/orchestration-workflow.svg" alt="Command → Agent → Skill architecture flow"
@@ -2331,7 +2397,7 @@ todoapp/
     </div>
 
     <!-- Slide 47: Workflow in action (GIF) -->
-    <div class="slide" data-slide="47" data-level="workflow">
+    <div class="slide" data-slide="48" data-level="workflow">
         <div style="min-height: calc(100vh - 120px);">
             <h1>&#x1F4F9; Workflow in action</h1>
             <div style="text-align: center; margin: 24px 0;">
@@ -2380,7 +2446,7 @@ todoapp/
 
 
     <!-- Slide 49: Thank you -->
-    <div class="slide section-slide" data-slide="48">
+    <div class="slide section-slide" data-slide="49">
         <div class="slide-viewport-content">
             <h1>&#x1F64F; Thank you!</h1>
             <div style="margin: 20px auto 28px auto; text-align: center;">