feat: add dark mode GitHub screenshots for step 1 animated GIF

Captured real screenshots from GitHub (dark mode) using Playwright:
- Issue #56: chaos scenario selection
- Actions run #17: workflow execution
- PR #70: code change diff

Combined into step-1.gif animated carousel (3s per slide).
Replaced CSS-only carousel with the animated GIF.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: yortch

docs/images/carousel-slide-1.png

@@ -840,35 +840,8 @@ <h2 class="section-title reveal reveal-delay-1">From Defect to Fix —<br /><spa
           <div class="tl-actor actor-chaos">🌪️ <a href="https://github.com/github/gh-aw" target="_blank" style="color:inherit">GitHub Agentic Workflow</a></div>
         </div>
         <div class="tl-num-col"><div class="tl-step-num step-red">1</div></div>
-        <div class="tl-carousel" data-screenshot="step-1">
-          <div class="carousel-track">
-            <div class="carousel-slide">
-              <div class="carousel-slide-num">1</div>
-              <div class="carousel-slide-icon">📋</div>
-              <div class="carousel-slide-title">Chaos Scenario Selected</div>
-              <div class="carousel-slide-desc">A GitHub Issue specifies the chaos scenario to inject — e.g., <code>backend-slow-response</code></div>
-              <a class="carousel-slide-link" href="https://github.com/yortch/agentic-devops-demo/issues/56" target="_blank">View Issue #56 →</a>
-            </div>
-            <div class="carousel-slide">
-              <div class="carousel-slide-num">2</div>
-              <div class="carousel-slide-icon">🤖</div>
-              <div class="carousel-slide-title">Agentic Workflow Runs</div>
-              <div class="carousel-slide-desc">The chaos workflow triggers, and the AI agent conversation shows how it selects &amp; injects the breaking change</div>
-              <a class="carousel-slide-link" href="https://github.com/yortch/agentic-devops-demo/actions/runs/23541767871" target="_blank">View Workflow Run →</a>
-            </div>
-            <div class="carousel-slide">
-              <div class="carousel-slide-num">3</div>
-              <div class="carousel-slide-icon">🔀</div>
-              <div class="carousel-slide-title">Chaos PR Created</div>
-              <div class="carousel-slide-desc">The agent opens a PR with the injected code change — ready to merge and deploy the breaking change</div>
-              <a class="carousel-slide-link" href="https://github.com/yortch/agentic-devops-demo/pull/70/files" target="_blank">View PR #70 Changes →</a>
-            </div>
-          </div>
-          <div class="carousel-dots">
-            <div class="carousel-dot"></div>
-            <div class="carousel-dot"></div>
-            <div class="carousel-dot"></div>
-          </div>
+        <div class="tl-screenshot" data-screenshot="step-1">
+          <img src="images/step-1.gif" alt="Step 1: Chaos scenario injection — Issue #56, Workflow run, PR #70" class="tl-screenshot-img" />
         </div>
       </div>