diff --git a/presentation/claude-code-best-practice/index.html b/presentation/claude-code-best-practice/index.html
index 521c0b2..3ce3142 100644
--- a/presentation/claude-code-best-practice/index.html
+++ b/presentation/claude-code-best-practice/index.html
@@ -522,50 +522,34 @@
     <!-- SLIDE 12: Tokens In, Tokens Out — Full Picture               -->
     <!-- ============================================================ -->
     <div class="slide" data-slide="12">
-        <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.6rem; margin-bottom: 28px;">Tokens in, tokens out</h1>
-
-            <!-- Animated SVG -->
-            <figure style="max-width: 860px; width: 100%; margin: 0 auto;">
-                <img
-                    src="../assets/llm/llm-advanced.svg"
-                    alt="Animated diagram combining tokenization and autoregressive generation: the BPE-tokenized prompt feeds into the LLM, which generates the answer token-by-token using the same shared vocabulary."
-                    style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
-                />
-                <figcaption style="margin-top: 20px; font-size: 1rem; color: #555; font-style: italic; line-height: 1.5;">
-                    <strong style="font-style: normal; color: #1a1a1a;">Input and output share the same vocabulary &mdash; tokenization shapes what the model even &ldquo;sees&rdquo;.</strong><br/>
-                    &ldquo;Anthropic&rdquo; becomes &ldquo;Anth&rdquo; + &ldquo;ropic&rdquo; because that&rsquo;s how it appears most often in training data.
-                </figcaption>
-            </figure>
-
-        </div>
+        <h1>How an LLM tokenizes input</h1>
+        <figure style="max-width: 1100px; width: 100%; margin: 24px auto 0;">
+            <img
+                src="../assets/llm/llm-advanced.svg"
+                alt="Animated diagram combining tokenization and autoregressive generation: the BPE-tokenized prompt feeds into the LLM, which generates the answer token-by-token using the same shared vocabulary."
+                style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
+            />
+            <figcaption style="margin-top: 16px; font-size: 1.1rem; color: #1a1a1a; font-weight: 600; text-align: center;">
+                BPE chops words into subword tokens &mdash; same color = same word, gray = punctuation.
+            </figcaption>
+        </figure>
     </div>
 
     <!-- ============================================================ -->
     <!-- SLIDE 13: What the Model Actually Sees — Integer Token IDs  -->
     <!-- ============================================================ -->
     <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;">
-
-            <!-- Title -->
-            <h1 style="border-bottom: none; padding-bottom: 0; font-size: 2.6rem; margin-bottom: 28px;">What the model actually sees</h1>
-
-            <!-- Animated SVG — wider asset (1360×600 viewBox); use max-width 960px to fill the slide without overcrowding -->
-            <figure style="max-width: 960px; width: 100%; margin: 0 auto;">
-                <img
-                    src="../assets/llm/llm-animation-tokenids.svg"
-                    alt="Animated diagram showing the 32 integer token IDs the model receives: e.g. 28133 for 'Does', 17554 for ' Chat', 162016 for 'GPT', 97481 for ' Claude'. Generated tokens are also shown as IDs. Vocab size V ≈ 200,000."
-                    style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
-                />
-                <figcaption style="margin-top: 20px; font-size: 1rem; color: #555; font-style: italic; line-height: 1.5;">
-                    <strong style="font-style: normal; color: #1a1a1a;">The model never reads text &mdash; it reads a sequence of integers, each one an index into a vocabulary of ~200,000 entries.</strong><br/>
-                    Notice the comma is always ID&nbsp;11 &mdash; the same punctuation mark maps to the same integer, everywhere, every time.
-                </figcaption>
-            </figure>
-
-        </div>
+        <h1>What the LLM actually sees: integer token IDs</h1>
+        <figure style="max-width: 1100px; width: 100%; margin: 24px auto 0;">
+            <img
+                src="../assets/llm/llm-animation-tokenids.svg"
+                alt="Animated diagram showing the 32 integer token IDs the model receives: e.g. 28133 for 'Does', 17554 for ' Chat', 162016 for 'GPT', 97481 for ' Claude'. Generated tokens are also shown as IDs. Vocab size V ≈ 200,000."
+                style="width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.10);"
+            />
+            <figcaption style="margin-top: 16px; font-size: 1.1rem; color: #1a1a1a; font-weight: 600; text-align: center;">
+                Notice the comma is always ID&nbsp;11 &mdash; the same punctuation mark maps to the same integer, everywhere, every time.
+            </figcaption>
+        </figure>
     </div>
 
     <!-- ============================================================ -->