diff --git a/registry/examples/airbnb-deck/DESIGN.md b/registry/examples/airbnb-deck/DESIGN.md
new file mode 100644
index 000000000..485084435
--- /dev/null
+++ b/registry/examples/airbnb-deck/DESIGN.md
@@ -0,0 +1,90 @@
+# Airbnb Seed Deck — Design Notes
+
+## Intent
+
+A premium remake of Airbnb's 2009 seed pitch deck using current Airbnb brand language.
+The composition should feel warm, human, and tasteful — the opposite of a tech startup
+dark-mode deck. White canvas, generous space, soft coral accents. Three.js backgrounds
+are elegant mood-setters, never distracting.
+
+## Color Palette
+
+| Token            | Value     | Use                                  |
+| ---------------- | --------- | ------------------------------------ |
+| Rausch (primary) | `#FF385C` | CTAs, logo, accent bars, highlights  |
+| Coral warm       | `#FF5A5F` | Gradient partner to Rausch           |
+| Babu dark        | `#E61E4D` | Hover / emphasis gradient endpoint   |
+| Off-white        | `#FFFFFF` | Slide background on light slides     |
+| Hof dark         | `#222222` | Primary text; dramatic dark slide bg |
+| Foggy gray       | `#717171` | Body copy, captions, secondary text  |
+| Arches light     | `#F7F7F7` | Card backgrounds, subtle panel fills |
+| Arches pink      | `#FFF1F1` | Soft pink tint for card areas        |
+
+Do not introduce blue, purple, or green accents. The palette is warm coral + neutral.
+
+## Typography
+
+**Font**: "Nunito Sans" from Google Fonts — geometric, rounded, friendly.
+Fallback stack: `"Nunito Sans", "Montserrat", system-ui, sans-serif`.
+
+| Role     | Size (1920×1080) | Weight            |
+| -------- | ---------------- | ----------------- |
+| Headline | 80–96px          | 800               |
+| Subhead  | 48px             | 400               |
+| Body     | 40–44px          | 400–600           |
+| Eyebrow  | 28–32px          | 700, letterspaced |
+| Numbers  | 96–120px         | 900               |
+
+Minimum readable size: 40px. Never go below that for audience-facing text.
+
+## The Bélo Logo
+
+The Bélo is Airbnb's universal belonging mark — a rounded loop that is simultaneously
+a heart, a location pin, and a letter A. Reproduce it as inline SVG in Rausch `#FF385C`.
+
+Use on: cover slide (large, centered), corner mark on every slide (48×48px, top-left).
+Do NOT stretch or recolor the Bélo. Pair with lowercase "airbnb" wordmark in `#222222`.
+
+## Layout Language
+
+- **Generous whitespace**: 120px top/bottom padding, 160px left/right on 1920px canvas.
+- **Rounded corners**: 16–24px on all cards and stat blocks.
+- **Soft shadows**: `box-shadow: 0 4px 24px rgba(0,0,0,0.08)` for cards.
+- White or very light slide backgrounds for most slides (readable and clean).
+- Dark background (`#222222`) for: Cover (optional dramatic variant), Team, Ask.
+- Keep layouts left-aligned or centered — never right-heavy.
+
+## Three.js Background Moods (per-slide)
+
+Backgrounds run on a persistent WebGL canvas behind all slide content.
+All animations use a fixed seed (no `Math.random()`); seeded using a deterministic LCG.
+Particle counts, positions, and velocities are computed from seeded values.
+
+| Slide         | Mood                                                                |
+| ------------- | ------------------------------------------------------------------- |
+| cover         | Soft floating coral particles, slow upward drift, warm pink fog     |
+| problem       | Desaturated gray particles, slower/heavier motion, cooler hue       |
+| solution      | Coral bloom: particles converge inward, warm pulse                  |
+| market        | Low-poly globe outline with soft arc routes in coral, gentle rotate |
+| product       | Clean minimal — very subtle grid of pale dots, nearly static        |
+| business      | Same as product — minimal                                           |
+| adoption      | Sparse warm nodes with thin connecting lines (network graph feel)   |
+| competition   | Cool gray minimal — positioning matrix backdrop                     |
+| team          | Soft bokeh: large blurred coral orbs, slow parallax                 |
+| ask           | Coral gradient swell — warm radial from center, slow pulse          |
+| market-sizing | Same globe as market, camera zoomed in, arcs highlighted            |
+
+## Do's
+
+- Large, single-stat slides for numbers ($2.1B, $500K) — let the number breathe.
+- Bottom-up math shown explicitly: trips × take-rate = revenue.
+- Complete-sentence headlines that make a claim, not a label.
+- SVG Bélo mark consistent across slides.
+
+## Don'ts
+
+- No dark purple, electric blue, neon green.
+- No hero imagery or stock photos (pure typography + Three.js + SVG).
+- No glassmorphism, frosted panels, or gamer-aesthetic effects.
+- No unseeded random values — all Three.js positions must be deterministic.
+- No font below 40px for any audience-visible text.
diff --git a/registry/examples/airbnb-deck/demo.html b/registry/examples/airbnb-deck/demo.html
new file mode 100644
index 000000000..d054911b5
--- /dev/null
+++ b/registry/examples/airbnb-deck/demo.html
@@ -0,0 +1,187 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Airbnb 2009 Seed Deck — Slideshow Demo</title>
+    <script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
+    <script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #111;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      NOTE: The <script type="application/hyperframes-slideshow+json"> island below is a
+      COPY of the island inside index.html. This duplication is intentional: <hyperframes-slideshow>
+      reads the island from its OWN innerHTML (not from the composition loaded by
+      <hyperframes-player>). Keep this copy in sync with the island in index.html whenever
+      slides, fragments, hotspots, or sequences change.
+    -->
+    <hyperframes-slideshow tabindex="0" sound style="display: block; position: relative; width: 100vw; height: 100vh">
+      <hyperframes-player
+        style="position: absolute; inset: 0"
+        src="index.html"
+      ></hyperframes-player>
+
+      <script type="application/hyperframes-slideshow+json">
+        {
+          "slides": [
+            {
+              "sceneId": "cover",
+              "notes": "Open with the tagline. Let the Bélo breathe. This is the belonging company."
+            },
+            {
+              "sceneId": "problem",
+              "notes": "Two problems, one at a time. Price first — hotels are expensive. Then connection.",
+              "fragments": [9.3, 9.6]
+            },
+            {
+              "sceneId": "solution",
+              "notes": "Platform connects hosts and travelers. Belong anywhere. Three value props."
+            },
+            {
+              "sceneId": "validation",
+              "notes": "Couchsurfing proves demand: 660k members want this. Craigslist shows supply side."
+            },
+            {
+              "sceneId": "market",
+              "notes": "Bottom-up: trips × take-rate = $2.1B. Use the hotspot for the drill-down math.",
+              "hotspots": [
+                {
+                  "id": "mkt-hotspot",
+                  "label": "Show me the math",
+                  "target": "market-math-detail",
+                  "region": { "x": 70, "y": 80, "w": 25, "h": 12 }
+                }
+              ]
+            },
+            {
+              "sceneId": "product",
+              "notes": "Three clicks: Search, Book, Travel. Show the booking flow simplicity."
+            },
+            {
+              "sceneId": "business",
+              "notes": "10% commission. At 80k transactions × $26 avg nightly take = $2.1M revenue."
+            },
+            {
+              "sceneId": "adoption",
+              "notes": "Events, conferences, Craigslist cross-posting, partnerships. Grass-roots growth."
+            },
+            {
+              "sceneId": "competition",
+              "notes": "Matrix: cheapest + online + transaction. Airbnb is the only one that hits all three."
+            },
+            {
+              "sceneId": "team",
+              "notes": "Brian (CEO/design), Joe (design), Nate (engineering). Domain depth: housing + tech."
+            },
+            {
+              "sceneId": "ask",
+              "notes": "Raising $500K. 12 months runway. Target: 80K transactions ≈ $2M revenue."
+            }
+          ],
+          "slideSequences": [
+            {
+              "id": "market-math-detail",
+              "label": "Market sizing methodology",
+              "slides": [
+                {
+                  "sceneId": "market-sizing",
+                  "notes": "Bottom-up drill: global trips × budget share × online booking rate × take-rate = $2.1B."
+                }
+              ]
+            }
+          ]
+        }
+      </script>
+    </hyperframes-slideshow>
+
+    <!--
+      Sound effects play HERE, in the parent document. The composition (loaded in the
+      player's iframe) detects slide/fragment/branch transitions and posts
+      { type: 'hf-sfx', name } to the parent. Audio must live in the frame that
+      receives the user's gesture (the parent) — an iframe without its own user
+      activation is autoplay-blocked. The mp3s are in sfx/ next to this file.
+
+      Mute state is owned by <hyperframes-slideshow sound>. Listen for 'hf-sound'
+      events (or read slideshow.muted / data-hf-muted) to skip playback when muted.
+    -->
+    <script>
+      (function () {
+        var clips = {
+          advance: new Audio("sfx/advance.mp3"),
+          fragment: new Audio("sfx/fragment.mp3"),
+          "branch-enter": new Audio("sfx/branch-enter.mp3"),
+          back: new Audio("sfx/back.mp3"),
+        };
+        clips.advance.volume = 0.45;
+        clips.fragment.volume = 0.4;
+        clips["branch-enter"].volume = 0.4;
+        clips.back.volume = 0.4;
+        for (var k in clips) clips[k].preload = "auto";
+
+        // Track mute state: updated via 'hf-sound' events from the slideshow chrome.
+        var muted = false;
+        var slideshow = document.querySelector("hyperframes-slideshow");
+        if (slideshow) {
+          slideshow.addEventListener("hf-sound", function (e) {
+            muted = e.detail && e.detail.muted === true;
+          });
+        }
+
+        var unlocked = false;
+        function unlock() {
+          if (unlocked) return;
+          unlocked = true;
+          // Prime each clip (play muted then reset) so later plays are instant + allowed.
+          Object.keys(clips).forEach(function (name) {
+            var el = clips[name];
+            var v = el.volume;
+            el.volume = 0;
+            el.play()
+              .then(function () {
+                el.pause();
+                el.currentTime = 0;
+                el.volume = v;
+              })
+              .catch(function () {
+                el.volume = v;
+              });
+          });
+        }
+        window.addEventListener("keydown", unlock, true);
+        window.addEventListener("pointerdown", unlock, true);
+        window.addEventListener("click", unlock, true);
+
+        window.addEventListener("message", function (e) {
+          var d = e.data;
+          if (!d || d.type !== "hf-sfx") return;
+          // Skip playback when muted — the component owns mute state.
+          if (muted) return;
+          var el = clips[d.name];
+          if (!el || !unlocked) return;
+          try {
+            el.currentTime = 0;
+            el.play().catch(function () {});
+          } catch (err) {
+            /* ignore */
+          }
+        });
+      })();
+    </script>
+  </body>
+</html>
diff --git a/registry/examples/airbnb-deck/index.html b/registry/examples/airbnb-deck/index.html
new file mode 100644
index 000000000..4ad674a2b
--- /dev/null
+++ b/registry/examples/airbnb-deck/index.html
@@ -0,0 +1,1571 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Airbnb — 2009 Seed Pitch Deck</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "Nunito Sans", "Montserrat", system-ui, sans-serif;
+        background: #ffffff;
+      }
+
+      /* Three.js background canvas — always behind everything */
+      #three-canvas {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        z-index: 0;
+        pointer-events: none;
+        -webkit-mask-image: radial-gradient(circle 220px at calc(100% - 30px) calc(100% - 30px), transparent 0, transparent 90px, black 220px);
+        mask-image: radial-gradient(circle 220px at calc(100% - 30px) calc(100% - 30px), transparent 0, transparent 90px, black 220px);
+      }
+
+      /* Scene frames — positioned above canvas */
+      .scene-frame {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        opacity: 0;
+        z-index: 1;
+        pointer-events: none;
+      }
+
+      /* Content containers — include a subtle glass scrim so text stays legible over 3D */
+      .slide-inner {
+        position: absolute;
+        inset: 0;
+        padding: 100px 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 32px;
+      }
+      .slide-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+        padding: 80px 200px;
+        text-align: center;
+      }
+
+      /* Glass scrim behind text — light slides.
+         Center is solid enough to read; edges fade to transparent so 3D shows in margins. */
+      .slide-inner.scrim-light,
+      .slide-center.scrim-light {
+        background: radial-gradient(ellipse 75% 80% at 50% 50%, rgba(255,255,255,0.88) 30%, rgba(255,255,255,0.60) 65%, rgba(255,255,255,0.0) 100%);
+      }
+
+      /* Glass scrim behind text — dark slides */
+      .slide-inner.scrim-dark,
+      .slide-center.scrim-dark {
+        background: radial-gradient(ellipse 80% 85% at 50% 50%, rgba(25,25,25,0.92) 30%, rgba(20,20,20,0.70) 65%, rgba(15,15,15,0.0) 100%);
+      }
+
+      /* Corner Bélo mark — shown on every slide except cover */
+      .belo-corner {
+        position: absolute;
+        top: 40px;
+        left: 60px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        z-index: 10;
+      }
+      .belo-corner-wordmark {
+        font-size: 28px;
+        font-weight: 800;
+        color: #FF385C;
+        letter-spacing: -0.02em;
+      }
+
+      /* Typography */
+      .eyebrow {
+        font-size: 28px;
+        font-weight: 700;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: #FF385C;
+      }
+      .headline {
+        font-size: 80px;
+        font-weight: 800;
+        line-height: 1.05;
+        letter-spacing: -0.025em;
+        color: #222222;
+      }
+      .headline-lg {
+        font-size: 88px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        color: #222222;
+      }
+      .headline-xl {
+        font-size: 120px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.04em;
+      }
+      .subhead {
+        font-size: 44px;
+        font-weight: 400;
+        line-height: 1.4;
+        color: #717171;
+        max-width: 1300px;
+      }
+      .subhead-center {
+        font-size: 44px;
+        font-weight: 400;
+        line-height: 1.4;
+        color: #717171;
+        max-width: 1100px;
+        text-align: center;
+      }
+      .stat-number {
+        font-size: 96px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.04em;
+        color: #FF385C;
+      }
+      .stat-label {
+        font-size: 36px;
+        font-weight: 600;
+        color: #717171;
+        margin-top: 8px;
+      }
+      .accent-bar {
+        width: 80px;
+        height: 6px;
+        border-radius: 3px;
+        background: #FF385C;
+      }
+
+      /* Cards */
+      .card-grid-3 {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 40px;
+        width: 100%;
+        max-width: 1560px;
+      }
+      .card {
+        padding: 48px;
+        background: #FFF1F1;
+        border-radius: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .card-title {
+        font-size: 44px;
+        font-weight: 800;
+        color: #FF385C;
+      }
+      .card-body {
+        font-size: 36px;
+        font-weight: 400;
+        color: #222222;
+        line-height: 1.45;
+      }
+
+      /* Problem items — start hidden, revealed imperatively */
+      .problem-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 32px;
+        opacity: 0;
+      }
+      .problem-num {
+        font-size: 56px;
+        font-weight: 900;
+        color: #FF385C;
+        line-height: 1;
+        min-width: 64px;
+        flex-shrink: 0;
+      }
+      .problem-text {
+        font-size: 52px;
+        font-weight: 600;
+        color: #222222;
+        line-height: 1.2;
+      }
+      .problem-sub {
+        font-size: 36px;
+        font-weight: 400;
+        color: #717171;
+        line-height: 1.35;
+        margin-top: 6px;
+      }
+
+      /* Market math */
+      .math-equation {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        flex-wrap: wrap;
+        margin-top: 8px;
+      }
+      .math-val {
+        font-size: 64px;
+        font-weight: 800;
+        color: #FF385C;
+      }
+      .math-op {
+        font-size: 52px;
+        font-weight: 400;
+        color: #717171;
+      }
+      .math-result {
+        font-size: 80px;
+        font-weight: 900;
+        color: #E61E4D;
+      }
+
+      /* Steps / flow */
+      .step-row {
+        display: flex;
+        align-items: center;
+        gap: 40px;
+      }
+      .step-num {
+        font-size: 48px;
+        font-weight: 900;
+        color: #FF385C;
+        min-width: 64px;
+      }
+      .step-text {
+        font-size: 44px;
+        font-weight: 600;
+        color: #222222;
+      }
+
+      /* Positioning matrix */
+      .matrix-table {
+        border-collapse: collapse;
+        width: 100%;
+        max-width: 1400px;
+      }
+      .matrix-table th {
+        font-size: 36px;
+        font-weight: 700;
+        color: #717171;
+        padding: 16px 24px;
+        text-align: left;
+        border-bottom: 2px solid #E0E0E0;
+      }
+      .matrix-table td {
+        font-size: 40px;
+        padding: 20px 24px;
+        border-bottom: 1px solid #F0F0F0;
+        color: #222222;
+      }
+      .matrix-table tr.airbnb-row td {
+        color: #FF385C;
+        font-weight: 800;
+        background: #FFF1F1;
+      }
+      .check { color: #FF385C; font-size: 40px; }
+      .cross { color: #717171; font-size: 40px; }
+
+      /* Team cards */
+      .team-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 48px;
+        width: 100%;
+        max-width: 1560px;
+      }
+      .team-card {
+        padding: 52px 48px;
+        background: rgba(255,255,255,0.08);
+        border-radius: 20px;
+        border: 1px solid rgba(255,56,92,0.25);
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .team-name {
+        font-size: 44px;
+        font-weight: 800;
+        color: #FF385C;
+      }
+      .team-role {
+        font-size: 32px;
+        font-weight: 600;
+        color: rgba(255,255,255,0.75);
+      }
+      .team-bio {
+        font-size: 30px;
+        font-weight: 400;
+        color: rgba(255,255,255,0.65);
+        line-height: 1.45;
+        margin-top: 4px;
+      }
+
+      /* Use of proceeds */
+      .use-list {
+        display: flex;
+        flex-direction: column;
+        gap: 28px;
+        margin-top: 8px;
+      }
+      .use-item {
+        display: flex;
+        align-items: baseline;
+        gap: 32px;
+      }
+      .use-pct {
+        font-size: 56px;
+        font-weight: 900;
+        color: #FF385C;
+        min-width: 140px;
+      }
+      .use-text {
+        font-size: 44px;
+        font-weight: 600;
+        color: rgba(255,255,255,0.9);
+        line-height: 1.3;
+      }
+    </style>
+  </head>
+  <body style="margin: 0; background: #ffffff">
+
+    <!--
+      Airbnb 2009 Seed Deck Remake
+      Timeline layout (contiguous, non-overlapping):
+        00–09s  cover           (main slide 1)
+        09–18s  problem         (main slide 2, fragments at 9.3, 9.6 — bunched near start)
+        18–27s  solution        (main slide 3)
+        27–36s  validation      (main slide 4)
+        36–45s  market          (main slide 5, hotspot → market-sizing branch)
+        45–54s  product         (main slide 6)
+        54–63s  business        (main slide 7)
+        63–72s  adoption        (main slide 8)
+        72–81s  competition     (main slide 9)
+        81–90s  team            (main slide 10)
+        90–99s  ask             (main slide 11)
+        99–108s market-sizing   (branch slide — market-math-detail sequence)
+    -->
+
+    <!-- JSON island -->
+    <script type="application/hyperframes-slideshow+json">
+      {
+        "slides": [
+          {
+            "sceneId": "cover",
+            "notes": "Open with the tagline. Let the Bélo breathe. This is the belonging company."
+          },
+          {
+            "sceneId": "problem",
+            "notes": "Two problems, one at a time. Price first — hotels are expensive. Then connection.",
+            "fragments": [9.3, 9.6]
+          },
+          {
+            "sceneId": "solution",
+            "notes": "Platform connects hosts and travelers. Belong anywhere. Three value props."
+          },
+          {
+            "sceneId": "validation",
+            "notes": "Couchsurfing proves demand: 660k members want this. Craigslist shows supply side."
+          },
+          {
+            "sceneId": "market",
+            "notes": "Bottom-up: trips × take-rate = $2.1B. Use the hotspot for the drill-down math.",
+            "hotspots": [
+              {
+                "id": "mkt-hotspot",
+                "label": "Show me the math",
+                "target": "market-math-detail",
+                "region": { "x": 70, "y": 80, "w": 25, "h": 12 }
+              }
+            ]
+          },
+          {
+            "sceneId": "product",
+            "notes": "Three clicks: Search, Book, Travel. Show the booking flow simplicity."
+          },
+          {
+            "sceneId": "business",
+            "notes": "10% commission. At 80k transactions × $26 avg nightly take = $2.1M revenue."
+          },
+          {
+            "sceneId": "adoption",
+            "notes": "Events, conferences, Craigslist cross-posting, partnerships. Grass-roots growth."
+          },
+          {
+            "sceneId": "competition",
+            "notes": "Matrix: cheapest + online + transaction. Airbnb is the only one that hits all three."
+          },
+          {
+            "sceneId": "team",
+            "notes": "Brian (CEO/design), Joe (design), Nate (engineering). Domain depth: housing + tech."
+          },
+          {
+            "sceneId": "ask",
+            "notes": "Raising $500K. 12 months runway. Target: 80K transactions ≈ $2M revenue."
+          }
+        ],
+        "slideSequences": [
+          {
+            "id": "market-math-detail",
+            "label": "Market sizing methodology",
+            "slides": [
+              {
+                "sceneId": "market-sizing",
+                "notes": "Bottom-up drill: global trips × budget share × online booking rate × take-rate = $2.1B."
+              }
+            ]
+          }
+        ]
+      }
+    </script>
+
+    <!-- Three.js background canvas -->
+    <canvas id="three-canvas" data-composition-id="three-canvas" data-start="0" data-width="1920" data-height="1080"></canvas>
+
+    <!-- Root composition container -->
+    <div
+      id="root"
+      data-composition-id="root"
+      data-start="0"
+      data-duration="108"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden"
+    >
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 1 — COVER
+           "Book rooms with locals, rather than hotels."
+           Start: 0  Duration: 9  End: 9
+           Background: white with soft coral particles (Three.js)
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-cover"
+        class="scene-frame clip"
+        data-composition-id="cover"
+        data-start="0"
+        data-duration="9"
+        data-label="Cover"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="slide-center scrim-light">
+          <!-- Large Bélo SVG -->
+          <svg id="cover-belo" width="120" height="120" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" data-anim>
+            <!-- Bélo: rounded A/heart/pin outline -->
+            <path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="5" fill="none"/>
+            <circle cx="50" cy="40" r="12" fill="#FF385C"/>
+          </svg>
+          <div id="cover-wordmark" style="font-size: 52px; font-weight: 800; color: #222222; letter-spacing: -0.02em" data-anim>airbnb</div>
+          <div id="cover-bar" class="accent-bar" style="width: 120px; margin: 8px auto" data-anim></div>
+          <h1 id="cover-headline" class="headline-lg" style="color: #222222; max-width: 1300px" data-anim>
+            Book rooms with locals, rather than hotels.
+          </h1>
+          <p id="cover-sub" class="subhead-center" data-anim>
+            Belong anywhere — a web platform connecting travelers with local hosts worldwide.
+          </p>
+          <div id="cover-year" style="font-size: 28px; font-weight: 700; color: #FF385C; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px" data-anim>Seed Round · 2009</div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 2 — PROBLEM
+           "Travelers overpay for sterile hotels while millions of empty rooms sit unused."
+           Start: 9  Duration: 9  End: 18
+           Fragments at 9.3, 9.6 (bunched near start — snappy reveals)
+           Background: light warm gray
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-problem"
+        class="scene-frame clip"
+        data-composition-id="problem"
+        data-start="9"
+        data-duration="9"
+        data-label="The problem"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <!-- Corner Bélo -->
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="prob-eyebrow" class="eyebrow" data-anim>The problem</div>
+          <h2 id="prob-headline" class="headline" style="max-width: 1400px" data-anim>
+            Travelers overpay for sterile hotels while millions of empty rooms sit unused.
+          </h2>
+          <div id="prob-item1" class="problem-item">
+            <span class="problem-num">01</span>
+            <div>
+              <div class="problem-text">Price: Hotels are expensive</div>
+              <div class="problem-sub">Budget travelers overpay — no affordable, human alternative exists online.</div>
+            </div>
+          </div>
+          <div id="prob-item2" class="problem-item">
+            <span class="problem-num">02</span>
+            <div>
+              <div class="problem-text">Disconnect: Hotels feel transactional</div>
+              <div class="problem-sub">Travelers are isolated from the city, the culture, and the locals who live there.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 3 — SOLUTION
+           "Airbnb is the web platform where anyone can rent space and belong anywhere."
+           Start: 18  Duration: 9  End: 27
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-solution"
+        class="scene-frame clip"
+        data-composition-id="solution"
+        data-start="18"
+        data-duration="9"
+        data-label="Solution"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="sol-eyebrow" class="eyebrow" data-anim>Solution</div>
+          <h2 id="sol-headline" class="headline" style="max-width: 1400px" data-anim>
+            A web platform where users can rent space to host travelers — belong anywhere.
+          </h2>
+          <div id="sol-cards" class="card-grid-3" data-anim>
+            <div class="card">
+              <div class="card-title">Save Money</div>
+              <div class="card-body">Travelers book rooms at 50–80% below hotel rates.</div>
+            </div>
+            <div class="card">
+              <div class="card-title">Make Money</div>
+              <div class="card-body">Hosts monetize spare space — avg $600–$900 / month.</div>
+            </div>
+            <div class="card">
+              <div class="card-title">Share Culture</div>
+              <div class="card-body">Real local experience — no hotel lobby, no checkout desk.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 4 — MARKET VALIDATION
+           "660,000 people on Couchsurfing prove demand for local, affordable stays."
+           Start: 27  Duration: 9  End: 36
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-validation"
+        class="scene-frame clip"
+        data-composition-id="validation"
+        data-start="27"
+        data-duration="9"
+        data-label="Market validation"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="val-eyebrow" class="eyebrow" data-anim>Market validation</div>
+          <h2 id="val-headline" class="headline" style="max-width: 1400px" data-anim>
+            660,000 people on Couchsurfing prove demand — travelers want local, not hotels.
+          </h2>
+          <div id="val-stats" style="display: flex; gap: 80px; margin-top: 8px" data-anim>
+            <div>
+              <div class="stat-number">660K</div>
+              <div class="stat-label">Couchsurfing members — free, unmonetized demand</div>
+            </div>
+            <div style="width: 2px; background: #E0E0E0; border-radius: 2px; align-self: stretch"></div>
+            <div>
+              <div class="stat-number" style="font-size: 72px">Craigslist</div>
+              <div class="stat-label">Millions of temporary housing listings show host supply</div>
+            </div>
+          </div>
+          <p id="val-note" class="subhead" style="margin-top: 8px" data-anim>
+            Neither platform charges for the transaction. Airbnb adds trust, payments, and discovery.
+          </p>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 5 — MARKET SIZE
+           "15% of budget travel online = 84M trips → $2.1B revenue opportunity."
+           Start: 36  Duration: 9  End: 45
+           Hotspot → market-math-detail branch
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-market"
+        class="scene-frame clip"
+        data-composition-id="market"
+        data-start="36"
+        data-duration="9"
+        data-label="Market size"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="mkt-eyebrow" class="eyebrow" data-anim>Market size</div>
+          <h2 id="mkt-headline" class="headline" style="max-width: 1400px" data-anim>
+            15% of budget travel online = 84M trips — a $2.1B annual revenue opportunity.
+          </h2>
+          <div id="mkt-math" class="math-equation" data-anim>
+            <span class="math-val">560M</span>
+            <span class="math-op">budget trips/yr</span>
+            <span class="math-op">×</span>
+            <span class="math-val">15%</span>
+            <span class="math-op">online share</span>
+            <span class="math-op">=</span>
+            <span class="math-val">84M trips</span>
+            <span class="math-op">×</span>
+            <span class="math-val">$25</span>
+            <span class="math-op">take</span>
+            <span class="math-op">=</span>
+            <span class="math-result">$2.1B</span>
+          </div>
+          <p id="mkt-note" class="subhead" style="margin-top: 4px" data-anim>
+            SAM: US + EU budget+online bookings. At 10% commission on avg $250 nightly rate.
+          </p>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 6 — PRODUCT
+           "Three clicks to book: Search, Book, Travel."
+           Start: 45  Duration: 9  End: 54
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-product"
+        class="scene-frame clip"
+        data-composition-id="product"
+        data-start="45"
+        data-duration="9"
+        data-label="Product"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="prod-eyebrow" class="eyebrow" data-anim>Product</div>
+          <h2 id="prod-headline" class="headline" style="max-width: 1400px" data-anim>
+            Three clicks to book — Search, Book, Travel.
+          </h2>
+          <div id="prod-steps" style="display: flex; flex-direction: column; gap: 36px; margin-top: 16px" data-anim>
+            <div class="step-row">
+              <span style="font-size: 56px; font-weight: 900; color: #FF385C; min-width: 80px">1</span>
+              <div>
+                <div class="step-text">Search — enter city, dates, guests</div>
+                <div style="font-size: 36px; color: #717171; margin-top: 6px">Listings with photos, reviews, and verified hosts appear instantly.</div>
+              </div>
+            </div>
+            <div class="step-row">
+              <span style="font-size: 56px; font-weight: 900; color: #FF385C; min-width: 80px">2</span>
+              <div>
+                <div class="step-text">Book — secure payment, instant confirmation</div>
+                <div style="font-size: 36px; color: #717171; margin-top: 6px">Funds held in escrow; released to host 24h after check-in.</div>
+              </div>
+            </div>
+            <div class="step-row">
+              <span style="font-size: 56px; font-weight: 900; color: #FF385C; min-width: 80px">3</span>
+              <div>
+                <div class="step-text">Travel — arrive, belong, review</div>
+                <div style="font-size: 36px; color: #717171; margin-top: 6px">Two-way reviews build a trust graph that improves every stay.</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 7 — BUSINESS MODEL
+           "10% commission per transaction — 80K bookings = $2.1M revenue."
+           Start: 54  Duration: 9  End: 63
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-business"
+        class="scene-frame clip"
+        data-composition-id="business"
+        data-start="54"
+        data-duration="9"
+        data-label="Business model"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-center scrim-light">
+          <div id="biz-eyebrow" class="eyebrow" data-anim>Business model</div>
+          <h2 id="biz-headline" class="headline-lg" style="max-width: 1300px" data-anim>
+            10% commission on every transaction.
+          </h2>
+          <div id="biz-math" class="math-equation" style="justify-content: center" data-anim>
+            <span class="math-val">80K</span>
+            <span class="math-op">transactions/yr</span>
+            <span class="math-op">×</span>
+            <span class="math-val">$26</span>
+            <span class="math-op">avg take</span>
+            <span class="math-op">=</span>
+            <span class="math-result">$2.1M</span>
+          </div>
+          <p id="biz-note" class="subhead-center" data-anim>
+            No inventory risk. No fixed costs. Every booking is pure margin above the payment processing fee.
+          </p>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 8 — ADOPTION STRATEGY
+           "Events, partnerships, and Craigslist cross-posting drive grass-roots supply."
+           Start: 63  Duration: 9  End: 72
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-adoption"
+        class="scene-frame clip"
+        data-composition-id="adoption"
+        data-start="63"
+        data-duration="9"
+        data-label="Adoption strategy"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="adop-eyebrow" class="eyebrow" data-anim>Adoption strategy</div>
+          <h2 id="adop-headline" class="headline" style="max-width: 1400px" data-anim>
+            Events, partnerships, and Craigslist cross-posting drive grass-roots supply.
+          </h2>
+          <div id="adop-items" style="display: flex; flex-direction: column; gap: 28px; margin-top: 8px" data-anim>
+            <div class="step-row">
+              <span style="width: 14px; height: 14px; background: #FF385C; border-radius: 50%; flex-shrink: 0; margin-top: 14px"></span>
+              <div class="step-text">Events &amp; conferences — partner with SXSW, DNC, major conferences to capture accommodation overflow</div>
+            </div>
+            <div class="step-row">
+              <span style="width: 14px; height: 14px; background: #FF385C; border-radius: 50%; flex-shrink: 0; margin-top: 14px"></span>
+              <div class="step-text">Craigslist cross-posting — auto-post new listings to reach existing supply-side intent</div>
+            </div>
+            <div class="step-row">
+              <span style="width: 14px; height: 14px; background: #FF385C; border-radius: 50%; flex-shrink: 0; margin-top: 14px"></span>
+              <div class="step-text">Travel blogger partnerships + media — earned press generates traveler demand at $0 CAC</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 9 — COMPETITION
+           "Airbnb is the only solution that is affordable, online, and transaction-enabled."
+           Start: 72  Duration: 9  End: 81
+           Background: white
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-competition"
+        class="scene-frame clip"
+        data-composition-id="competition"
+        data-start="72"
+        data-duration="9"
+        data-label="Competition"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-light">
+          <div id="comp-eyebrow" class="eyebrow" data-anim>Competition</div>
+          <h2 id="comp-headline" class="headline" style="max-width: 1400px" data-anim>
+            Airbnb is the only solution that is affordable, online, and transaction-enabled.
+          </h2>
+          <table id="comp-table" class="matrix-table" style="margin-top: 16px" data-anim>
+            <thead>
+              <tr>
+                <th style="width: 360px">Solution</th>
+                <th>Affordable</th>
+                <th>Online</th>
+                <th>Transaction</th>
+                <th>Local connection</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="airbnb-row">
+                <td>airbnb</td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+              </tr>
+              <tr>
+                <td>Hotels</td>
+                <td><span class="cross">✗</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="cross">✗</span></td>
+              </tr>
+              <tr>
+                <td>Couchsurfing</td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="cross">✗</span></td>
+                <td><span class="check">✓</span></td>
+              </tr>
+              <tr>
+                <td>Craigslist</td>
+                <td><span class="check">✓</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="cross">✗</span></td>
+                <td><span class="cross">✗</span></td>
+              </tr>
+              <tr>
+                <td>B&amp;Bs / Hostels</td>
+                <td><span class="check">✓</span></td>
+                <td><span class="cross">✗</span></td>
+                <td><span class="check">✓</span></td>
+                <td><span class="cross">✗</span></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 10 — TEAM
+           "Three founders: design, design, and engineering — who built this from their apartment."
+           Start: 81  Duration: 9  End: 90
+           Background: dark #222222
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-team"
+        class="scene-frame clip"
+        data-composition-id="team"
+        data-start="81"
+        data-duration="9"
+        data-label="Team"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark" style="color: #FF385C">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-dark">
+          <div id="team-eyebrow" class="eyebrow" data-anim>The founders</div>
+          <h2 id="team-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            Three founders who bootstrapped Airbnb from their San Francisco apartment.
+          </h2>
+          <div id="team-cards" class="team-grid" style="margin-top: 8px" data-anim>
+            <div class="team-card">
+              <span class="team-name">Brian Chesky</span>
+              <span class="team-role">CEO &amp; Co-founder</span>
+              <span class="team-bio">Industrial design, RISD. Drove the brand, trust model, and host experience from day one.</span>
+            </div>
+            <div class="team-card">
+              <span class="team-name">Joe Gebbia</span>
+              <span class="team-role">CPO &amp; Co-founder</span>
+              <span class="team-bio">RISD design, product. Built the first site and the airbeds-and-breakfast concept that became Airbnb.</span>
+            </div>
+            <div class="team-card">
+              <span class="team-name">Nathan Blecharczyk</span>
+              <span class="team-role">CTO &amp; Co-founder</span>
+              <span class="team-bio">Harvard CS. Architected the payments, trust, and scalable search infrastructure from scratch.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           SLIDE 11 — ASK
+           "Raising $500K for 12 months — targeting 80K transactions and $2M revenue."
+           Start: 90  Duration: 9  End: 99
+           Background: dark #222222
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-ask"
+        class="scene-frame clip"
+        data-composition-id="ask"
+        data-start="90"
+        data-duration="9"
+        data-label="The ask"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark" style="color: #FF385C">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-dark">
+          <div id="ask-eyebrow" class="eyebrow" data-anim>The ask</div>
+          <h2 id="ask-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            Raising $500K for 12 months — targeting 80K transactions and $2M revenue.
+          </h2>
+          <div id="ask-amount" style="display: flex; align-items: baseline; gap: 24px; margin-top: 8px" data-anim>
+            <span style="font-size: 120px; font-weight: 900; color: #FF385C; letter-spacing: -0.05em">$500K</span>
+            <span style="font-size: 44px; color: rgba(255,255,255,0.6); font-weight: 600">seed round</span>
+          </div>
+          <div id="ask-uses" class="use-list" data-anim>
+            <div class="use-item">
+              <span class="use-pct">45%</span>
+              <span class="use-text">Product &amp; engineering — mobile-first booking, trust &amp; safety, payments</span>
+            </div>
+            <div class="use-item">
+              <span class="use-pct">30%</span>
+              <span class="use-text">Growth &amp; partnerships — events, Craigslist, travel media outreach</span>
+            </div>
+            <div class="use-item">
+              <span class="use-pct">25%</span>
+              <span class="use-text">Operations — customer support, host quality, legal &amp; insurance</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ════════════════════════════════════════════════
+           BRANCH SLIDE — MARKET-SIZING
+           Branch: market-math-detail / "Market sizing methodology"
+           Start: 99  Duration: 9  End: 108
+           NOT in main slides array — only in slideSequences
+           Background: dark Hof #222222 with coral accents
+      ═════════════════════════════════════════════════════ -->
+      <div
+        id="scene-market-sizing"
+        class="scene-frame clip"
+        data-composition-id="market-sizing"
+        data-start="99"
+        data-duration="9"
+        data-label="Market sizing methodology"
+        data-track-index="1"
+        style="background: transparent"
+      >
+        <div class="belo-corner">
+          <svg width="36" height="36" viewBox="0 0 100 100" fill="none"><path d="M50 10 C30 10, 16 26, 16 42 C16 60, 32 73, 50 90 C68 73, 84 60, 84 42 C84 26, 70 10, 50 10 Z" stroke="#FF385C" stroke-width="7" fill="none"/><circle cx="50" cy="40" r="12" fill="#FF385C"/></svg>
+          <span class="belo-corner-wordmark" style="color: #FF385C">airbnb</span>
+        </div>
+        <div class="slide-inner scrim-dark">
+          <div id="sizing-eyebrow" class="eyebrow" data-anim>Market sizing methodology</div>
+          <h2 id="sizing-headline" class="headline" style="color: #ffffff; max-width: 1500px" data-anim>
+            Bottom-up: 560M budget trips/yr × 15% online × $25 avg take = $2.1B.
+          </h2>
+          <div id="sizing-steps" style="display: flex; flex-direction: column; gap: 28px; margin-top: 16px" data-anim>
+            <div style="display: flex; gap: 28px; align-items: flex-start">
+              <span style="font-size: 48px; font-weight: 900; color: #FF385C; min-width: 72px">1.</span>
+              <span style="font-size: 40px; color: rgba(255,255,255,0.85); font-weight: 600; line-height: 1.35">Global leisure trips/yr: ~1.4B total. Budget segment (hostels, B&amp;Bs, couch): ~40% = 560M trips.</span>
+            </div>
+            <div style="display: flex; gap: 28px; align-items: flex-start">
+              <span style="font-size: 48px; font-weight: 900; color: #FF385C; min-width: 72px">2.</span>
+              <span style="font-size: 40px; color: rgba(255,255,255,0.85); font-weight: 600; line-height: 1.35">Online booking penetration in budget segment: ~15% today, growing 30%/yr → SAM = 84M trips.</span>
+            </div>
+            <div style="display: flex; gap: 28px; align-items: flex-start">
+              <span style="font-size: 48px; font-weight: 900; color: #FF385C; min-width: 72px">3.</span>
+              <span style="font-size: 40px; color: rgba(255,255,255,0.85); font-weight: 600; line-height: 1.35">Avg nightly rate $250 × 10% commission = $25 take. 84M trips × $25 = <span style="color: #FF385C; font-weight: 900">$2.1B</span> revenue.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Root timeline — spans full 108s composition -->
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          tl.to({}, { duration: 108 });
+          window.__timelines["root"] = tl;
+        })();
+      </script>
+
+    </div><!-- end #root -->
+
+    <!-- Three.js scene setup -->
+    <script type="module">
+      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+
+      // --- Seeded LCG for deterministic "random" ---
+      function makeLCG(seed) {
+        var s = seed >>> 0;
+        return function () {
+          s = (Math.imul(1664525, s) + 1013904223) >>> 0;
+          return s / 4294967296;
+        };
+      }
+
+      var canvas = document.getElementById("three-canvas");
+
+      // Guard: attempt WebGL renderer creation ONCE. On failure log ONE warning and stop.
+      // The deck degrades gracefully — white-bg branded layout is the fallback.
+      // Temporarily suppress console.error so THREE's internal multi-line error spam
+      // doesn't fire on every page load in environments without a GPU.
+      var renderer = null;
+      var _consoleError = console.error;
+      console.error = function () {}; // silence during creation attempt
+      try {
+        renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
+      } catch (e) {
+        // renderer stays null — handled below
+      } finally {
+        console.error = _consoleError; // always restore
+      }
+      if (!renderer) {
+        // Hide canvas; expose no-op so visibility controller calls are safe.
+        canvas.style.display = "none";
+        window.__threeApplyMood = function () {};
+        // Do NOT proceed — rAF loop must not start.
+      } else {
+        // Renderer created OK — configure size and run the scene.
+        renderer.setSize(1920, 1080);
+        renderer.setPixelRatio(1);
+        // Ensure canvas fills the stage (full-bleed, behind content)
+        canvas.style.position = "fixed";
+        canvas.style.top = "0";
+        canvas.style.left = "0";
+        canvas.style.width = "1920px";
+        canvas.style.height = "1080px";
+        canvas.style.zIndex = "0";
+        canvas.style.pointerEvents = "none";
+
+      var scene = new THREE.Scene();
+      var camera = new THREE.PerspectiveCamera(60, 1920 / 1080, 0.1, 1000);
+      camera.position.set(0, 0, 5);
+
+      // === PARTICLE SYSTEM ===
+      var PARTICLE_COUNT = 280;
+      var rng = makeLCG(42);
+
+      var positions = new Float32Array(PARTICLE_COUNT * 3);
+      var colors = new Float32Array(PARTICLE_COUNT * 3);
+      var sizes = new Float32Array(PARTICLE_COUNT);
+      var velocities = [];
+
+      for (var i = 0; i < PARTICLE_COUNT; i++) {
+        positions[i * 3]     = (rng() - 0.5) * 16;
+        positions[i * 3 + 1] = (rng() - 0.5) * 9;
+        positions[i * 3 + 2] = (rng() - 0.5) * 4;
+        velocities.push({
+          x: (rng() - 0.5) * 0.004,
+          y: (rng() - 0.5) * 0.006 + 0.002,
+          z: 0
+        });
+        sizes[i] = rng() * 10 + 3;
+        // default coral color
+        colors[i * 3]     = 1.0;
+        colors[i * 3 + 1] = 0.22;
+        colors[i * 3 + 2] = 0.36;
+      }
+
+      var geo = new THREE.BufferGeometry();
+      geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+      geo.setAttribute("color", new THREE.BufferAttribute(colors, 3));
+      geo.setAttribute("size", new THREE.BufferAttribute(sizes, 1));
+
+      var mat = new THREE.PointsMaterial({
+        size: 0.18,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.55,
+        sizeAttenuation: true
+      });
+      var particles = new THREE.Points(geo, mat);
+      scene.add(particles);
+
+      // === GLOBE (for market slide) ===
+      // Positioned on the right side so it doesn't occlude left-side text
+      var globeGroup = new THREE.Group();
+      globeGroup.visible = false;
+      globeGroup.position.set(3.5, 0, -0.5);
+      scene.add(globeGroup);
+
+      // Low-poly wireframe sphere
+      var sphereGeo = new THREE.IcosahedronGeometry(2.2, 2);
+      var sphereMat = new THREE.MeshBasicMaterial({
+        color: 0xFF385C,
+        wireframe: true,
+        transparent: true,
+        opacity: 0.45
+      });
+      var globe = new THREE.Mesh(sphereGeo, sphereMat);
+      globeGroup.add(globe);
+
+      // Arc routes (simple lines on sphere surface)
+      var arcRng = makeLCG(99);
+      for (var a = 0; a < 12; a++) {
+        var lat1 = (arcRng() - 0.5) * Math.PI;
+        var lon1 = arcRng() * Math.PI * 2;
+        var lat2 = (arcRng() - 0.5) * Math.PI;
+        var lon2 = arcRng() * Math.PI * 2;
+        var pts = [];
+        for (var t = 0; t <= 20; t++) {
+          var tt = t / 20;
+          var lat = lat1 + (lat2 - lat1) * tt;
+          var lon = lon1 + (lon2 - lon1) * tt;
+          var r = 2.25 + Math.sin(tt * Math.PI) * 0.15;
+          pts.push(new THREE.Vector3(
+            r * Math.cos(lat) * Math.cos(lon),
+            r * Math.sin(lat),
+            r * Math.cos(lat) * Math.sin(lon)
+          ));
+        }
+        var arcGeo = new THREE.BufferGeometry().setFromPoints(pts);
+        var arcMat = new THREE.LineBasicMaterial({ color: 0xFF385C, transparent: true, opacity: 0.75 });
+        globeGroup.add(new THREE.Line(arcGeo, arcMat));
+      }
+
+      // === BOKEH ORBS (for team slide) ===
+      var bokehGroup = new THREE.Group();
+      bokehGroup.visible = false;
+      scene.add(bokehGroup);
+      var bokehRng = makeLCG(17);
+      for (var b = 0; b < 8; b++) {
+        var bGeo = new THREE.SphereGeometry(0.4 + bokehRng() * 0.8, 8, 8);
+        var bMat = new THREE.MeshBasicMaterial({
+          color: b % 2 === 0 ? 0xFF385C : 0xFF5A5F,
+          transparent: true,
+          opacity: 0.08 + bokehRng() * 0.06
+        });
+        var bokeh = new THREE.Mesh(bGeo, bMat);
+        bokeh.position.set(
+          (bokehRng() - 0.5) * 14,
+          (bokehRng() - 0.5) * 8,
+          (bokehRng() - 0.5) * 2 - 2
+        );
+        bokehGroup.add(bokeh);
+      }
+
+      // === SCENE MOOD CONFIG ===
+      // Map scene IDs to mood: particle color, opacity, globe, bokeh
+      var MOODS = {
+        "cover":        { r: 1.0, g: 0.22, b: 0.36, opacity: 0.55, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "problem":      { r: 0.6, g: 0.55, b: 0.58, opacity: 0.30, globe: false, bokeh: false, bg: 0xF7F7F7 },
+        "solution":     { r: 1.0, g: 0.35, b: 0.37, opacity: 0.60, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "validation":   { r: 1.0, g: 0.22, b: 0.36, opacity: 0.35, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "market":       { r: 1.0, g: 0.22, b: 0.36, opacity: 0.40, globe: true,  bokeh: false, bg: 0xFFFFFF },
+        "product":      { r: 1.0, g: 0.35, b: 0.45, opacity: 0.35, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "business":     { r: 1.0, g: 0.35, b: 0.45, opacity: 0.35, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "adoption":     { r: 1.0, g: 0.22, b: 0.36, opacity: 0.35, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "competition":  { r: 1.0, g: 0.22, b: 0.36, opacity: 0.25, globe: false, bokeh: false, bg: 0xFFFFFF },
+        "team":         { r: 1.0, g: 0.22, b: 0.36, opacity: 0.40, globe: false, bokeh: true,  bg: 0x222222 },
+        "ask":          { r: 1.0, g: 0.22, b: 0.36, opacity: 0.60, globe: false, bokeh: false, bg: 0x222222 },
+        "market-sizing":{ r: 1.0, g: 0.22, b: 0.36, opacity: 0.25, globe: true,  bokeh: false, bg: 0x1a1a1a }
+      };
+
+      var currentMood = "cover";
+
+      function applyMood(id) {
+        var m = MOODS[id] || MOODS["cover"];
+        currentMood = id;
+        // Update particle colors
+        for (var i = 0; i < PARTICLE_COUNT; i++) {
+          colors[i * 3]     = m.r;
+          colors[i * 3 + 1] = m.g;
+          colors[i * 3 + 2] = m.b;
+        }
+        geo.attributes.color.needsUpdate = true;
+        mat.opacity = m.opacity;
+        globeGroup.visible = !!m.globe;
+        bokehGroup.visible = !!m.bokeh;
+        renderer.setClearColor(m.bg, 0); // transparent bg — slide bg handles it
+      }
+
+      applyMood("cover");
+
+      // Expose for the visibility controller
+      window.__threeApplyMood = applyMood;
+
+      var clock = { t: 0 };
+      var lastTime = null;
+
+      function animate(ts) {
+        requestAnimationFrame(animate);
+        if (lastTime === null) lastTime = ts;
+        var dt = Math.min((ts - lastTime) / 1000, 0.05);
+        lastTime = ts;
+        clock.t += dt;
+
+        // Animate particles
+        var pos = geo.attributes.position.array;
+        for (var i = 0; i < PARTICLE_COUNT; i++) {
+          pos[i * 3]     += velocities[i].x;
+          pos[i * 3 + 1] += velocities[i].y;
+          pos[i * 3 + 2] += velocities[i].z;
+          // Wrap vertically
+          if (pos[i * 3 + 1] > 5) pos[i * 3 + 1] = -5;
+          if (pos[i * 3]     >  9) pos[i * 3]     = -9;
+          if (pos[i * 3]     < -9) pos[i * 3]     =  9;
+        }
+        geo.attributes.position.needsUpdate = true;
+
+        // Rotate globe slowly
+        if (globeGroup.visible) {
+          globeGroup.rotation.y = clock.t * 0.2;
+          globeGroup.rotation.x = Math.sin(clock.t * 0.1) * 0.15;
+        }
+
+        // Parallax bokeh
+        if (bokehGroup.visible) {
+          bokehGroup.rotation.y = Math.sin(clock.t * 0.08) * 0.1;
+          bokehGroup.rotation.x = Math.cos(clock.t * 0.06) * 0.06;
+        }
+
+        renderer.render(scene, camera);
+      }
+      requestAnimationFrame(animate);
+      } // end else (renderer OK)
+    </script>
+
+    <!-- Scene visibility controller + imperative GSAP entrance driver -->
+    <script>
+      (function () {
+        var scenes = [
+          { id: "scene-cover",       sceneKey: "cover",       start: 0,   end: 9   },
+          { id: "scene-problem",     sceneKey: "problem",     start: 9,   end: 18  },
+          { id: "scene-solution",    sceneKey: "solution",    start: 18,  end: 27  },
+          { id: "scene-validation",  sceneKey: "validation",  start: 27,  end: 36  },
+          { id: "scene-market",      sceneKey: "market",      start: 36,  end: 45  },
+          { id: "scene-product",     sceneKey: "product",     start: 45,  end: 54  },
+          { id: "scene-business",    sceneKey: "business",    start: 54,  end: 63  },
+          { id: "scene-adoption",    sceneKey: "adoption",    start: 63,  end: 72  },
+          { id: "scene-competition", sceneKey: "competition", start: 72,  end: 81  },
+          { id: "scene-team",        sceneKey: "team",        start: 81,  end: 90  },
+          { id: "scene-ask",         sceneKey: "ask",         start: 90,  end: 99  },
+          { id: "scene-market-sizing", sceneKey: "market-sizing", start: 99, end: 108 }
+        ];
+
+        // Problem fragment config
+        var probFragments = [
+          { time: 9.3, id: "prob-item1" },
+          { time: 9.6, id: "prob-item2" }
+        ];
+        var probRevealed = [false, false];
+
+        var lastActiveId = null;
+
+        function fireEntrance(sceneEl) {
+          var animEls = sceneEl.querySelectorAll("[data-anim]");
+          if (!animEls.length) return;
+          gsap.from(animEls, {
+            opacity: 0,
+            y: 28,
+            duration: 0.4,
+            stagger: 0.07,
+            ease: "power2.out",
+            overwrite: true
+          });
+        }
+
+        function revealProblem(id) {
+          var el = document.getElementById(id);
+          if (!el) return;
+          gsap.fromTo(el,
+            { opacity: 0, x: -24 },
+            { opacity: 1, x: 0, duration: 0.35, ease: "power2.out", overwrite: true }
+          );
+        }
+
+        function updateVisibility(t) {
+          for (var i = 0; i < scenes.length; i++) {
+            var s = scenes[i];
+            var el = document.getElementById(s.id);
+            if (!el) continue;
+            var active = t >= s.start && t < s.end;
+            el.style.opacity = active ? "1" : "0";
+            el.style.pointerEvents = active ? "auto" : "none";
+
+            if (active && lastActiveId !== s.id) {
+              // Update Three.js mood
+              if (window.__threeApplyMood) window.__threeApplyMood(s.sceneKey);
+
+              if (s.id === "scene-problem") {
+                // Reset problem items on re-entry
+                probRevealed = [false, false];
+                probFragments.forEach(function (f) {
+                  var pEl = document.getElementById(f.id);
+                  if (pEl) gsap.set(pEl, { opacity: 0, x: 0, clearProps: "transform" });
+                });
+              }
+              lastActiveId = s.id;
+              fireEntrance(el);
+            }
+          }
+
+          // Reveal problem fragments
+          for (var f = 0; f < probFragments.length; f++) {
+            if (!probRevealed[f] && t >= probFragments[f].time) {
+              probRevealed[f] = true;
+              revealProblem(probFragments[f].id);
+            }
+          }
+        }
+
+        window.__hfSetTime = updateVisibility;
+
+        // Show first slide immediately
+        updateVisibility(0);
+
+        function hookRoot() {
+          var root = window.__timelines && window.__timelines["root"];
+          if (root) {
+            root.eventCallback("onUpdate", function () {
+              updateVisibility(root.time());
+            });
+          }
+        }
+        hookRoot();
+      })();
+    </script>
+
+    <!-- SFX cue poster — posts transition cues to the parent unconditionally.
+         Mute state is owned by <hyperframes-slideshow sound> in the parent;
+         the parent gates playback on its mute state. The coral mute button has
+         been removed — use the mute control in the nav capsule (demo.html). -->
+    <script>
+      (function () {
+        window.__sfxPlayed = window.__sfxPlayed || [];
+
+        // Unlock logic kept for best-effort local play (only fires if the
+        // composition ever gets its own activation, e.g. when opened directly).
+        var unlocked = false;
+        var clips = {
+          advance:     new Audio('sfx/advance.mp3'),
+          fragment:    new Audio('sfx/fragment.mp3'),
+          branchEnter: new Audio('sfx/branch-enter.mp3'),
+          back:        new Audio('sfx/back.mp3')
+        };
+        clips.advance.preload     = 'auto';
+        clips.fragment.preload    = 'auto';
+        clips.branchEnter.preload = 'auto';
+        clips.back.preload        = 'auto';
+        clips.advance.volume      = 0.45;
+        clips.fragment.volume     = 0.40;
+        clips.branchEnter.volume  = 0.38;
+        clips.back.volume         = 0.38;
+
+        function playClip(el) {
+          el.currentTime = 0;
+          el.play().catch(function () {});
+        }
+
+        function primeAll() {
+          var keys = ['advance', 'fragment', 'branchEnter', 'back'];
+          for (var ki = 0; ki < keys.length; ki++) {
+            var el = clips[keys[ki]];
+            var savedVol = el.volume;
+            el.volume = 0;
+            el.play().then(function (e2) {
+              return function () { e2.pause(); e2.currentTime = 0; e2.volume = savedVol; };
+            }(el)).catch(function (e2, sv) {
+              return function () { e2.volume = sv; };
+            }(el, savedVol));
+          }
+        }
+
+        function onFirstGesture() {
+          if (unlocked) return;
+          unlocked = true;
+          primeAll();
+        }
+        document.addEventListener('keydown', onFirstGesture, true);
+        document.addEventListener('pointerdown', onFirstGesture, true);
+        document.addEventListener('click', onFirstGesture, true);
+        window.addEventListener('keydown', onFirstGesture, true);
+        window.addEventListener('pointerdown', onFirstGesture, true);
+
+        function playSfx(name) {
+          window.__sfxPlayed.push(name);
+          // Post the cue to the parent unconditionally — the parent's audio player
+          // gates on the slideshow component's mute state (hf-sound event).
+          try { parent.postMessage({ type: 'hf-sfx', name: name }, '*'); } catch (e) {}
+          // Best-effort local play (only fires if this doc ever gets activation).
+          if (!unlocked) return;
+          switch (name) {
+            case 'advance':      playClip(clips.advance);      break;
+            case 'fragment':     playClip(clips.fragment);     break;
+            case 'branch-enter': playClip(clips.branchEnter);  break;
+            case 'back':         playClip(clips.back);         break;
+          }
+        }
+
+        window.__playSfx = playSfx;
+      })();
+    </script>
+
+    <!-- Patch visibility controller to fire sfx on scene/fragment transitions -->
+    <script>
+      (function () {
+        // Wait for __hfSetTime and __playSfx to be defined, then wrap __hfSetTime
+        var origUpdateVisibility = window.__hfSetTime;
+        var lastScene = null;
+        var wasInBranch = false;
+        var fragmentRevealedSfx = [false, false];
+        var probFragmentTimes = [9.3, 9.6];
+        var BRANCH_SCENE_ID = 'scene-market-sizing';
+        var BRANCH_START = 99;
+        var BRANCH_END = 108;
+        var initialized = false;
+
+        function patchedUpdateVisibility(t) {
+          origUpdateVisibility(t);
+
+          var playSfx = window.__playSfx;
+          if (!playSfx) return;
+
+          // Determine current active scene
+          var scenes = [
+            { id: 'scene-cover',       start: 0,   end: 9   },
+            { id: 'scene-problem',     start: 9,   end: 18  },
+            { id: 'scene-solution',    start: 18,  end: 27  },
+            { id: 'scene-validation',  start: 27,  end: 36  },
+            { id: 'scene-market',      start: 36,  end: 45  },
+            { id: 'scene-product',     start: 45,  end: 54  },
+            { id: 'scene-business',    start: 54,  end: 63  },
+            { id: 'scene-adoption',    start: 63,  end: 72  },
+            { id: 'scene-competition', start: 72,  end: 81  },
+            { id: 'scene-team',        start: 81,  end: 90  },
+            { id: 'scene-ask',         start: 90,  end: 99  },
+            { id: 'scene-market-sizing', start: 99, end: 108 }
+          ];
+
+          var activeScene = null;
+          for (var i = 0; i < scenes.length; i++) {
+            if (t >= scenes[i].start && t < scenes[i].end) {
+              activeScene = scenes[i].id;
+              break;
+            }
+          }
+
+          var inBranch = (activeScene === BRANCH_SCENE_ID);
+
+          if (!initialized) {
+            // Suppress first activation on page load
+            initialized = true;
+            lastScene = activeScene;
+            wasInBranch = inBranch;
+            return;
+          }
+
+          if (activeScene && activeScene !== lastScene) {
+            // Determine if this is a branch transition or a regular advance
+            if (inBranch && !wasInBranch) {
+              playSfx('branch-enter');
+            } else if (!inBranch && wasInBranch) {
+              playSfx('back');
+            } else {
+              playSfx('advance');
+            }
+            // Reset fragment sfx tracking on problem re-entry
+            if (activeScene === 'scene-problem') {
+              fragmentRevealedSfx = [false, false];
+            }
+            lastScene = activeScene;
+            wasInBranch = inBranch;
+          }
+
+          // Fragment sfx — fire on same crossing that revealProblem fires
+          for (var f = 0; f < probFragmentTimes.length; f++) {
+            if (!fragmentRevealedSfx[f] && t >= probFragmentTimes[f]) {
+              fragmentRevealedSfx[f] = true;
+              playSfx('fragment');
+            }
+          }
+        }
+
+        window.__hfSetTime = patchedUpdateVisibility;
+
+        // Also re-hook the root timeline callback after load
+        // (the timeline callback was set before our patch)
+        window.addEventListener('load', function () {
+          var root = window.__timelines && window.__timelines['root'];
+          if (root) {
+            root.eventCallback('onUpdate', function () {
+              patchedUpdateVisibility(root.time());
+            });
+          }
+        });
+      })();
+    </script>
+
+    <!-- Bootstrap postMessage for slideshow component -->
+    <script>
+      (function () {
+        var totalFrames = 108 * 30; // 108s × 30fps = 3240 frames
+        var scenes = [
+          { id: "cover",          start: 0,   duration: 9 },
+          { id: "problem",        start: 9,   duration: 9 },
+          { id: "solution",       start: 18,  duration: 9 },
+          { id: "validation",     start: 27,  duration: 9 },
+          { id: "market",         start: 36,  duration: 9 },
+          { id: "product",        start: 45,  duration: 9 },
+          { id: "business",       start: 54,  duration: 9 },
+          { id: "adoption",       start: 63,  duration: 9 },
+          { id: "competition",    start: 72,  duration: 9 },
+          { id: "team",           start: 81,  duration: 9 },
+          { id: "ask",            start: 90,  duration: 9 },
+          { id: "market-sizing",  start: 99,  duration: 9 }
+        ];
+
+        function postTimeline() {
+          parent.postMessage({
+            source: "hf-preview",
+            type: "timeline",
+            durationInFrames: totalFrames,
+            scenes: scenes
+          }, "*");
+        }
+
+        if (document.readyState === "complete") {
+          setTimeout(postTimeline, 300);
+        } else {
+          window.addEventListener("load", function () { setTimeout(postTimeline, 300); });
+        }
+      })();
+    </script>
+
+  </body>
+</html>
diff --git a/registry/examples/airbnb-deck/sfx/advance.mp3 b/registry/examples/airbnb-deck/sfx/advance.mp3
new file mode 100644
index 000000000..139843f79
Binary files /dev/null and b/registry/examples/airbnb-deck/sfx/advance.mp3 differ
diff --git a/registry/examples/airbnb-deck/sfx/back.mp3 b/registry/examples/airbnb-deck/sfx/back.mp3
new file mode 100644
index 000000000..10654fdac
Binary files /dev/null and b/registry/examples/airbnb-deck/sfx/back.mp3 differ
diff --git a/registry/examples/airbnb-deck/sfx/branch-enter.mp3 b/registry/examples/airbnb-deck/sfx/branch-enter.mp3
new file mode 100644
index 000000000..9e8d9a7b5
Binary files /dev/null and b/registry/examples/airbnb-deck/sfx/branch-enter.mp3 differ
diff --git a/registry/examples/airbnb-deck/sfx/fragment.mp3 b/registry/examples/airbnb-deck/sfx/fragment.mp3
new file mode 100644
index 000000000..7c7b5dfbc
Binary files /dev/null and b/registry/examples/airbnb-deck/sfx/fragment.mp3 differ
diff --git a/registry/examples/slideshow-demo/index.html b/registry/examples/slideshow-demo/index.html
new file mode 100644
index 000000000..c4a8b60e1
--- /dev/null
+++ b/registry/examples/slideshow-demo/index.html
@@ -0,0 +1,429 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Slideshow Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      @font-face {
+        font-family: "Inter";
+        font-weight: 400 800;
+        font-style: normal;
+        src: local("Inter"), local("Inter-Regular");
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #0f1117;
+        font-family: "Inter", sans-serif;
+      }
+
+      /* ── Scene base ─────────────────────────────────────── */
+      .scene {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+      }
+
+      /* ── Typography ─────────────────────────────────────── */
+      .slide-heading {
+        font-size: 96px;
+        font-weight: 800;
+        letter-spacing: -0.03em;
+        color: #ffffff;
+        opacity: 0;
+      }
+      .slide-body {
+        font-size: 40px;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.7);
+        max-width: 1200px;
+        text-align: center;
+        line-height: 1.4;
+        opacity: 0;
+      }
+      .slide-tag {
+        font-size: 28px;
+        font-weight: 600;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        padding: 12px 32px;
+        border-radius: 48px;
+        opacity: 0;
+      }
+
+      /* ── Scene-specific colors ──────────────────────────── */
+      #scene-intro .slide-tag {
+        background: #4f46e5;
+        color: #ffffff;
+      }
+      #scene-features .slide-tag {
+        background: #0ea5e9;
+        color: #ffffff;
+      }
+      #scene-cta .slide-tag {
+        background: #10b981;
+        color: #ffffff;
+      }
+      #scene-branch-a .slide-tag {
+        background: #f59e0b;
+        color: #ffffff;
+      }
+      #scene-branch-b .slide-tag {
+        background: #ef4444;
+        color: #ffffff;
+      }
+
+      /* ── Fragment reveal bullets ────────────────────────── */
+      .bullet-list {
+        list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        width: 900px;
+      }
+      .bullet-list li {
+        font-size: 36px;
+        font-weight: 600;
+        color: rgba(255, 255, 255, 0.9);
+        opacity: 0;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+      }
+      .bullet-list li::before {
+        content: "▶";
+        color: #4f46e5;
+        font-size: 24px;
+        flex-shrink: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      Root composition — 30 seconds total, four scenes:
+        0–8   scene-intro    (slide 1, main line, 2 fragments at 3s and 6s)
+        8–16  scene-features (slide 2, main line, hotspot → dive-deeper branch)
+       16–24  scene-cta      (slide 3, main line)
+       24–28  scene-branch-a (branch "dive-deeper", slide 1)
+       28–32  scene-branch-b (branch "dive-deeper", slide 2)
+
+      NOTE: total composition span is 32s to accommodate the branch at the end.
+      Branch scenes are laid at 24–32s so they don't overlap the main line.
+    -->
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="32"
+      data-width="1920"
+      data-height="1080"
+    >
+      <!-- ── Scene 1: Intro ───────────────────────────────── -->
+      <div
+        id="scene-intro"
+        class="scene clip"
+        data-composition-id="scene-intro"
+        data-start="0"
+        data-duration="8"
+        data-label="Intro"
+      >
+        <div class="slide-tag" id="intro-tag">Hyperframes</div>
+        <h1 class="slide-heading" id="intro-heading">Write HTML. Ship Video.</h1>
+        <p class="slide-body" id="intro-body-1">
+          A composition framework that turns deterministic HTML + GSAP into frame-perfect MP4.
+        </p>
+        <ul class="bullet-list" id="intro-bullets">
+          <li id="intro-bullet-1">Render at any resolution or framerate</li>
+          <li id="intro-bullet-2">Zero runtime surprises — fully deterministic</li>
+        </ul>
+        <script>
+          (function () {
+            window.__timelines = window.__timelines || {};
+            var tl = gsap.timeline({ paused: true });
+            // Entrance: tag fades up, then heading, then body
+            tl.fromTo(
+              "#intro-tag",
+              { opacity: 0, y: 24 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              "#intro-heading",
+              { opacity: 0, y: 40 },
+              { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" },
+              0.2,
+            );
+            tl.fromTo(
+              "#intro-body-1",
+              { opacity: 0, y: 20 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" },
+              0.5,
+            );
+            // Fragment 1 hold point at 3s — bullet 1 reveals here
+            tl.fromTo(
+              "#intro-bullet-1",
+              { opacity: 0, x: -20 },
+              { opacity: 1, x: 0, duration: 0.5, ease: "back.out(1.4)" },
+              1.5,
+            );
+            // Fragment 2 hold point at 6s — bullet 2 reveals here
+            tl.fromTo(
+              "#intro-bullet-2",
+              { opacity: 0, x: -20 },
+              { opacity: 1, x: 0, duration: 0.5, ease: "back.out(1.4)" },
+              4.5,
+            );
+            window.__timelines["scene-intro"] = tl;
+          })();
+        </script>
+      </div>
+
+      <!-- ── Scene 2: Features ───────────────────────────── -->
+      <div
+        id="scene-features"
+        class="scene clip"
+        data-composition-id="scene-features"
+        data-start="8"
+        data-duration="8"
+        data-label="Features"
+      >
+        <div class="slide-tag" id="features-tag">Feature Deep Dive</div>
+        <h1 class="slide-heading" id="features-heading">Everything You Need</h1>
+        <p class="slide-body" id="features-body">
+          From shader transitions to slideshow mode — the full stack is here.
+        </p>
+        <script>
+          (function () {
+            window.__timelines = window.__timelines || {};
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              "#features-tag",
+              { opacity: 0, scale: 0.8 },
+              { opacity: 1, scale: 1, duration: 0.5, ease: "back.out(1.7)" },
+              0,
+            );
+            tl.fromTo(
+              "#features-heading",
+              { opacity: 0, y: 40 },
+              { opacity: 1, y: 0, duration: 0.7, ease: "power3.out" },
+              0.15,
+            );
+            tl.fromTo(
+              "#features-body",
+              { opacity: 0, y: 20 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" },
+              0.45,
+            );
+            window.__timelines["scene-features"] = tl;
+          })();
+        </script>
+      </div>
+
+      <!-- ── Scene 3: CTA ────────────────────────────────── -->
+      <div
+        id="scene-cta"
+        class="scene clip"
+        data-composition-id="scene-cta"
+        data-start="16"
+        data-duration="8"
+        data-label="Call to Action"
+      >
+        <div class="slide-tag" id="cta-tag">Get Started</div>
+        <h1 class="slide-heading" id="cta-heading">Ship Your First Video Today</h1>
+        <p class="slide-body" id="cta-body">
+          npx hyperframes create my-video — and you're rendering in under a minute.
+        </p>
+        <script>
+          (function () {
+            window.__timelines = window.__timelines || {};
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              "#cta-tag",
+              { opacity: 0, y: -20 },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              "#cta-heading",
+              { opacity: 0, scale: 0.9 },
+              { opacity: 1, scale: 1, duration: 0.8, ease: "elastic.out(1, 0.6)" },
+              0.2,
+            );
+            tl.fromTo(
+              "#cta-body",
+              { opacity: 0, y: 20 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power2.out" },
+              0.5,
+            );
+            window.__timelines["scene-cta"] = tl;
+          })();
+        </script>
+      </div>
+
+      <!-- ── Branch scenes: Dive Deeper ─────────────────── -->
+      <!-- These are placed at 24–32s, outside the main-line range of 0–24s -->
+
+      <div
+        id="scene-branch-a"
+        class="scene clip"
+        data-composition-id="scene-branch-a"
+        data-start="24"
+        data-duration="4"
+        data-label="Under the Hood"
+      >
+        <div class="slide-tag" id="branch-a-tag">Architecture</div>
+        <h1 class="slide-heading" id="branch-a-heading">How It Works</h1>
+        <p class="slide-body" id="branch-a-body">
+          Puppeteer drives Chromium frame-by-frame. FFmpeg encodes. Your HTML is the source of truth.
+        </p>
+        <script>
+          (function () {
+            window.__timelines = window.__timelines || {};
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              "#branch-a-tag",
+              { opacity: 0, x: -30 },
+              { opacity: 1, x: 0, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              "#branch-a-heading",
+              { opacity: 0, y: 30 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
+              0.2,
+            );
+            tl.fromTo(
+              "#branch-a-body",
+              { opacity: 0, y: 20 },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+              0.45,
+            );
+            window.__timelines["scene-branch-a"] = tl;
+          })();
+        </script>
+      </div>
+
+      <div
+        id="scene-branch-b"
+        class="scene clip"
+        data-composition-id="scene-branch-b"
+        data-start="28"
+        data-duration="4"
+        data-label="Performance"
+      >
+        <div class="slide-tag" id="branch-b-tag">Performance</div>
+        <h1 class="slide-heading" id="branch-b-heading">Fast Capture Mode</h1>
+        <p class="slide-body" id="branch-b-body">
+          drawElement bypasses screenshot-per-frame for 2-4× faster renders with lossless quality.
+        </p>
+        <script>
+          (function () {
+            window.__timelines = window.__timelines || {};
+            var tl = gsap.timeline({ paused: true });
+            tl.fromTo(
+              "#branch-b-tag",
+              { opacity: 0, x: -30 },
+              { opacity: 1, x: 0, duration: 0.5, ease: "power2.out" },
+              0,
+            );
+            tl.fromTo(
+              "#branch-b-heading",
+              { opacity: 0, y: 30 },
+              { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
+              0.2,
+            );
+            tl.fromTo(
+              "#branch-b-body",
+              { opacity: 0, y: 20 },
+              { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" },
+              0.45,
+            );
+            window.__timelines["scene-branch-b"] = tl;
+          })();
+        </script>
+      </div>
+
+      <!-- ── Root timeline ─────────────────────────────── -->
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          // Root timeline spans the full 32s; individual scene timelines
+          // are registered separately under their own composition-id keys.
+          tl.to({}, { duration: 32 });
+          window.__timelines["main"] = tl;
+        })();
+      </script>
+    </div>
+
+    <!-- ── Slideshow JSON island ──────────────────────────── -->
+    <!--
+      sceneId values intentionally match data-composition-id WITHOUT explicit
+      startTime/endTime — this exercises Task 7's sceneId resolution path.
+
+      Lint resolves them via collectCompositionIdScenes (data-composition-id + data-start/data-duration).
+      Browser runtime resolves them via player.scenes (populated from the "timeline" postMessage
+      after runtime injection at ~1s — see Task 7 timing-risk note in progress.md).
+    -->
+    <script type="application/hyperframes-slideshow+json">
+      {
+        "slides": [
+          {
+            "sceneId": "scene-intro",
+            "fragments": [3, 6],
+            "notes": "Step through: tag → heading → body, then bullet 1 at 3s, bullet 2 at 6s."
+          },
+          {
+            "sceneId": "scene-features",
+            "hotspots": [
+              {
+                "id": "dive-deeper-hotspot",
+                "label": "Dive Deeper",
+                "target": "dive-deeper",
+                "region": { "x": 70, "y": 80, "w": 20, "h": 10 }
+              }
+            ],
+            "notes": "Feature overview. Hotspot in bottom-right enters the architecture branch."
+          },
+          {
+            "sceneId": "scene-cta",
+            "notes": "Call to action. End of main deck."
+          }
+        ],
+        "slideSequences": [
+          {
+            "id": "dive-deeper",
+            "label": "Dive Deeper",
+            "slides": [
+              {
+                "sceneId": "scene-branch-a",
+                "notes": "Architecture overview: Puppeteer + FFmpeg pipeline."
+              },
+              {
+                "sceneId": "scene-branch-b",
+                "notes": "Fast Capture Mode: drawElement for 2-4x speed."
+              }
+            ]
+          }
+        ]
+      }
+    </script>
+  </body>
+</html>
diff --git a/registry/examples/startup-pitch/demo.html b/registry/examples/startup-pitch/demo.html
new file mode 100644
index 000000000..234648afb
--- /dev/null
+++ b/registry/examples/startup-pitch/demo.html
@@ -0,0 +1,107 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FlowDesk Pitch — Slideshow Demo</title>
+    <script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
+    <script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      NOTE: The <script type="application/hyperframes-slideshow+json"> island
+      below is a COPY of the island inside index.html. This duplication is a
+      current workaround: <hyperframes-slideshow> reads the island from its OWN
+      innerHTML (not from the composition loaded by <hyperframes-player>). In a
+      future version the component should read the island from the composition
+      directly. Keep this copy in sync with the one in index.html.
+    -->
+    <hyperframes-slideshow tabindex="0" style="display: block; position: relative; width: 100vw; height: 100vh">
+      <hyperframes-player
+        style="position: absolute; inset: 0"
+        src="index.html"
+      ></hyperframes-player>
+
+      <script type="application/hyperframes-slideshow+json">
+        {
+          "slides": [
+            {
+              "sceneId": "cover",
+              "notes": "Open cold with the tagline. Let it breathe — no build, just the claim."
+            },
+            {
+              "sceneId": "problem",
+              "notes": "Walk through each pain point one fragment at a time. The 14h/week stat is the anchor.",
+              "fragments": [8.3, 8.6, 8.9],
+              "hotspots": []
+            },
+            {
+              "sceneId": "solution",
+              "notes": "One sentence. The product kills the three pains from the previous slide."
+            },
+            {
+              "sceneId": "why-now",
+              "notes": "Three macro tailwinds — remote-first freelancing, API economy, AI underwriting."
+            },
+            {
+              "sceneId": "market",
+              "notes": "Bottom-up math only. 480k agencies × $4,200 ACV = $2.0B SAM. Use hotspot for methodology Q.",
+              "hotspots": [
+                {
+                  "id": "mkt-hotspot",
+                  "label": "How did you size this market?",
+                  "target": "market-sizing-drill",
+                  "region": { "x": 55, "y": 60, "w": 40, "h": 28 }
+                }
+              ]
+            },
+            {
+              "sceneId": "product",
+              "notes": "Three product pillars — intake, approvals, invoicing. Show the single workflow view."
+            },
+            {
+              "sceneId": "traction",
+              "notes": "Lead with MRR and NRR — investors pattern-match on those two numbers first."
+            },
+            {
+              "sceneId": "team",
+              "notes": "Why us: ex-Stripe, ex-Figma, serial founders. Domain depth on both sides."
+            },
+            {
+              "sceneId": "ask",
+              "notes": "$4M seed to hit 1,000 customers. Show specific use of proceeds."
+            }
+          ],
+          "slideSequences": [
+            {
+              "id": "market-sizing-drill",
+              "label": "Market sizing methodology",
+              "slides": [
+                {
+                  "sceneId": "market-drill",
+                  "notes": "Step through the bottom-up math: Dun & Bradstreet count → filter → ACV from comparable comps."
+                }
+              ]
+            }
+          ]
+        }
+      </script>
+    </hyperframes-slideshow>
+  </body>
+</html>
diff --git a/registry/examples/startup-pitch/index.html b/registry/examples/startup-pitch/index.html
new file mode 100644
index 000000000..be9621868
--- /dev/null
+++ b/registry/examples/startup-pitch/index.html
@@ -0,0 +1,859 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>FlowDesk — Investor Pitch</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+      }
+
+      /* ── Shared scene positioning ───────────────────────── */
+      .scene-frame {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        opacity: 0;
+      }
+
+      /* ── Content containers ──────────────────────────────── */
+      .slide-inner {
+        position: absolute;
+        inset: 0;
+        padding: 100px 160px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 32px;
+      }
+      .slide-center {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+        padding: 100px 200px;
+      }
+
+      /* ── Typography ─────────────────────────────────────── */
+      .eyebrow {
+        font-size: 32px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      .headline {
+        font-size: 80px;
+        font-weight: 800;
+        line-height: 1.05;
+        letter-spacing: -0.025em;
+      }
+      .headline-lg {
+        font-size: 96px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        text-align: center;
+      }
+      .subhead {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 1.35;
+        max-width: 1200px;
+      }
+      .subhead-center {
+        font-size: 48px;
+        font-weight: 400;
+        line-height: 1.35;
+        max-width: 1100px;
+        text-align: center;
+      }
+      .stat-row {
+        display: flex;
+        gap: 80px;
+        align-items: flex-end;
+      }
+      .stat-block {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .stat-number {
+        font-size: 96px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.04em;
+      }
+      .stat-label {
+        font-size: 36px;
+        font-weight: 500;
+        opacity: 0.7;
+      }
+
+      /* ── Problem bullets ─────────────────────────────────── */
+      .pain-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 28px;
+        /* pain items start hidden; driver reveals them imperatively on fragment */
+        opacity: 0;
+      }
+      .pain-num {
+        font-size: 56px;
+        font-weight: 900;
+        line-height: 1;
+        flex-shrink: 0;
+        min-width: 64px;
+      }
+      .pain-text {
+        font-size: 52px;
+        font-weight: 600;
+        line-height: 1.2;
+      }
+
+      /* ── Market math ─────────────────────────────────────── */
+      .math-row {
+        display: flex;
+        align-items: center;
+        gap: 32px;
+        font-size: 56px;
+        font-weight: 700;
+      }
+      .math-op {
+        font-size: 56px;
+        font-weight: 400;
+        opacity: 0.5;
+      }
+      .math-result {
+        font-size: 80px;
+        font-weight: 900;
+      }
+
+      /* ── Traction stats ──────────────────────────────────── */
+      .traction-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 60px;
+        width: 100%;
+        max-width: 1500px;
+      }
+      .traction-card {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 48px;
+        border-radius: 24px;
+      }
+      .traction-number {
+        font-size: 80px;
+        font-weight: 900;
+        line-height: 1;
+        letter-spacing: -0.03em;
+      }
+      .traction-label {
+        font-size: 36px;
+        font-weight: 500;
+      }
+
+      /* ── Team cards ──────────────────────────────────────── */
+      .team-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 60px;
+        width: 100%;
+        max-width: 1500px;
+      }
+      .team-card {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 48px;
+        border-radius: 24px;
+      }
+      .team-name {
+        font-size: 44px;
+        font-weight: 800;
+      }
+      .team-role {
+        font-size: 32px;
+        font-weight: 600;
+        opacity: 0.7;
+      }
+      .team-bio {
+        font-size: 28px;
+        font-weight: 400;
+        line-height: 1.4;
+        opacity: 0.8;
+      }
+
+      /* ── Ask pill list ──────────────────────────────────── */
+      .use-list {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+      .use-item {
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        font-size: 44px;
+        font-weight: 600;
+      }
+      .use-pct {
+        font-size: 44px;
+        font-weight: 900;
+        min-width: 120px;
+      }
+
+      /* ── Decorative accent bar ───────────────────────────── */
+      .accent-bar {
+        width: 80px;
+        height: 8px;
+        border-radius: 4px;
+      }
+    </style>
+  </head>
+  <body style="margin: 0">
+    <!--
+      FlowDesk — Investor Pitch Deck
+      Startup: FlowDesk — workflow SaaS for freelance creative agencies
+        automates client intake, approval loops, and invoicing.
+
+      Timeline layout (all scenes non-overlapping, contiguous main line):
+        00–08s  cover           (main slide 1)
+        08–20s  problem         (main slide 2, 3 fragments at 8.3, 8.6, 8.9s — bunched near start)
+        20–28s  solution        (main slide 3)
+        28–36s  why-now         (main slide 4)
+        36–44s  market          (main slide 5, hotspot → market-drill branch)
+        44–52s  product         (main slide 6)
+        52–60s  traction        (main slide 7)
+        60–68s  team            (main slide 8)
+        68–76s  ask             (main slide 9)
+        76–84s  market-drill    (branch slide — market-sizing-drill sequence)
+    -->
+
+    <!-- ── JSON island (source of truth for slide order, fragments, hotspots) ── -->
+    <script type="application/hyperframes-slideshow+json">
+      {
+        "slides": [
+          {
+            "sceneId": "cover",
+            "notes": "Open cold with the tagline. Let it breathe — no build, just the claim."
+          },
+          {
+            "sceneId": "problem",
+            "notes": "Walk through each pain point one fragment at a time. The 14h/week stat is the anchor.",
+            "fragments": [8.3, 8.6, 8.9],
+            "hotspots": []
+          },
+          {
+            "sceneId": "solution",
+            "notes": "One sentence. The product kills the three pains from the previous slide."
+          },
+          {
+            "sceneId": "why-now",
+            "notes": "Three macro tailwinds — remote-first freelancing, API economy, AI underwriting."
+          },
+          {
+            "sceneId": "market",
+            "notes": "Bottom-up math only. 480k agencies × $4,200 ACV = $2.0B SAM. Use hotspot for methodology Q.",
+            "hotspots": [
+              {
+                "id": "mkt-hotspot",
+                "label": "How did you size this market?",
+                "target": "market-sizing-drill",
+                "region": { "x": 55, "y": 60, "w": 40, "h": 28 }
+              }
+            ]
+          },
+          {
+            "sceneId": "product",
+            "notes": "Three product pillars — intake, approvals, invoicing. Show the single workflow view."
+          },
+          {
+            "sceneId": "traction",
+            "notes": "Lead with MRR and NRR — investors pattern-match on those two numbers first."
+          },
+          {
+            "sceneId": "team",
+            "notes": "Why us: ex-Stripe, ex-Figma, serial founders. Domain depth on both sides."
+          },
+          {
+            "sceneId": "ask",
+            "notes": "$4M seed to hit 1,000 customers. Show specific use of proceeds."
+          }
+        ],
+        "slideSequences": [
+          {
+            "id": "market-sizing-drill",
+            "label": "Market sizing methodology",
+            "slides": [
+              {
+                "sceneId": "market-drill",
+                "notes": "Step through the bottom-up math: Dun & Bradstreet count → filter → ACV from comparable comps."
+              }
+            ]
+          }
+        ]
+      }
+    </script>
+
+    <!-- Root composition container -->
+    <div
+      id="root"
+      data-composition-id="root"
+      data-start="0"
+      data-duration="84"
+      data-width="1920"
+      data-height="1080"
+      style="position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #0b0b0f"
+    >
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 1 — COVER
+           "FlowDesk turns creative agency chaos into billable momentum"
+           Start: 0  Duration: 8  End: 8
+           Background: deep indigo gradient
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-cover"
+        class="scene-frame clip"
+        data-composition-id="cover"
+        data-start="0"
+        data-duration="8"
+        data-label="Cover"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #0d0d2b 0%, #1a0a3d 50%, #0d1f4a 100%)"
+      >
+        <div class="slide-center">
+          <div id="cover-eyebrow" class="eyebrow" style="color: #7c6ff7" data-anim>Seed Round 2026</div>
+          <h1 id="cover-headline" class="headline-lg" style="color: #ffffff" data-anim>
+            FlowDesk turns creative agency chaos into billable momentum
+          </h1>
+          <p id="cover-sub" class="subhead-center" style="color: rgba(255,255,255,0.65)" data-anim>
+            Workflow automation for freelance creative agencies — intake, approvals, and invoicing in one place
+          </p>
+          <div id="cover-bar" class="accent-bar" style="background: #7c6ff7; width: 120px" data-anim></div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 2 — PROBLEM
+           "Creative agencies haemorrhage 14 hours a week chasing approvals and invoices"
+           Start: 8  Duration: 12  End: 20
+           Fragments at 8.3, 8.6, 8.9 (absolute timeline times — bunched near start for snappiness)
+           Background: dark warm red
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-problem"
+        class="scene-frame clip"
+        data-composition-id="problem"
+        data-start="8"
+        data-duration="12"
+        data-label="The problem"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #1a0808 0%, #2d0f0f 100%)"
+      >
+        <div class="slide-inner">
+          <div id="prob-eyebrow" class="eyebrow" style="color: #f87171" data-anim>The problem</div>
+          <h2 id="prob-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            Creative agencies haemorrhage 14 hours a week chasing approvals and invoices
+          </h2>
+          <div id="prob-pain1" class="pain-item">
+            <span class="pain-num" style="color: #f87171">01</span>
+            <span class="pain-text" style="color: rgba(255,255,255,0.9)">Client feedback loops take 4–6 days per project revision</span>
+          </div>
+          <div id="prob-pain2" class="pain-item">
+            <span class="pain-num" style="color: #f87171">02</span>
+            <span class="pain-text" style="color: rgba(255,255,255,0.9)">Late invoices leave 28% of revenue outstanding 30+ days</span>
+          </div>
+          <div id="prob-pain3" class="pain-item">
+            <span class="pain-num" style="color: #f87171">03</span>
+            <span class="pain-text" style="color: rgba(255,255,255,0.9)">Intake chaos — email threads, Notion, DMs — kills 3h/week on triage</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 3 — SOLUTION
+           "FlowDesk collapses intake, approvals, and invoicing into one automated workflow — agencies bill faster and work less"
+           Start: 20  Duration: 8  End: 28
+           Background: rich teal/green
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-solution"
+        class="scene-frame clip"
+        data-composition-id="solution"
+        data-start="20"
+        data-duration="8"
+        data-label="Solution"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #071a17 0%, #0a2e26 50%, #06201b 100%)"
+      >
+        <div class="slide-center">
+          <div id="sol-eyebrow" class="eyebrow" style="color: #34d399" data-anim>Our solution</div>
+          <h2 id="sol-headline" class="headline-lg" style="color: #ffffff; max-width: 1400px" data-anim>
+            FlowDesk collapses intake, approvals, and invoicing into one automated workflow — agencies bill faster and work less
+          </h2>
+          <p id="sol-sub" class="subhead-center" style="color: rgba(255,255,255,0.65)" data-anim>
+            One link for clients. One dashboard for teams. Zero email follow-ups.
+          </p>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 4 — WHY NOW
+           "Three forces converging in 2026 make FlowDesk a category-defining moment"
+           Start: 28  Duration: 8  End: 36
+           Background: midnight blue
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-why-now"
+        class="scene-frame clip"
+        data-composition-id="why-now"
+        data-start="28"
+        data-duration="8"
+        data-label="Why now"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #050d1f 0%, #0a1a3d 100%)"
+      >
+        <div class="slide-inner">
+          <div id="wn-eyebrow" class="eyebrow" style="color: #60a5fa" data-anim>Why now</div>
+          <h2 id="wn-headline" class="headline" style="color: #ffffff" data-anim>
+            Three forces converging in 2026 make FlowDesk a category-defining moment
+          </h2>
+          <div id="wn-row" class="stat-row" style="gap: 60px; margin-top: 16px" data-anim>
+            <div class="stat-block">
+              <span class="stat-number" style="color: #60a5fa">74%</span>
+              <span class="stat-label" style="color: rgba(255,255,255,0.65)">of US agencies now fully remote — async tooling is table stakes</span>
+            </div>
+            <div class="stat-block">
+              <span class="stat-number" style="color: #60a5fa">3×</span>
+              <span class="stat-label" style="color: rgba(255,255,255,0.65)">growth in SMB API adoption, enabling no-code automations</span>
+            </div>
+            <div class="stat-block">
+              <span class="stat-number" style="color: #60a5fa">AI</span>
+              <span class="stat-label" style="color: rgba(255,255,255,0.65)">AI-powered approval routing cuts review cycles by 60%</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 5 — MARKET
+           "480,000 US creative agencies × $4,200 ACV = $2.0B serviceable market"
+           Start: 36  Duration: 8  End: 44
+           Hotspot → market-sizing-drill branch
+           Background: deep purple
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-market"
+        class="scene-frame clip"
+        data-composition-id="market"
+        data-start="36"
+        data-duration="8"
+        data-label="Market"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #110824 0%, #1e0a40 100%)"
+      >
+        <div class="slide-inner">
+          <div id="mkt-eyebrow" class="eyebrow" style="color: #a78bfa" data-anim>Market sizing</div>
+          <h2 id="mkt-headline" class="headline" style="color: #ffffff; max-width: 1300px" data-anim>
+            480,000 US creative agencies × $4,200 ACV = $2.0B serviceable market
+          </h2>
+          <div id="mkt-math" class="math-row" style="color: #ffffff; margin-top: 8px" data-anim>
+            <span style="color: #a78bfa; font-size: 56px; font-weight: 800">480k</span>
+            <span class="math-op">agencies</span>
+            <span class="math-op">×</span>
+            <span style="color: #a78bfa; font-size: 56px; font-weight: 800">$4,200</span>
+            <span class="math-op">ACV</span>
+            <span class="math-op">=</span>
+            <span id="mkt-result" class="math-result" style="color: #c4b5fd">$2.0B SAM</span>
+          </div>
+          <p id="mkt-note" class="subhead" style="color: rgba(255,255,255,0.55); font-size: 36px; margin-top: 8px" data-anim>
+            Initial wedge: 3–15 person US agencies billing $250k–$2M/yr via Stripe. Expand to EU in year 2.
+          </p>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 6 — PRODUCT
+           "FlowDesk's three-module platform cuts the agency ops stack from six tools to one"
+           Start: 44  Duration: 8  End: 52
+           Background: slate dark
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-product"
+        class="scene-frame clip"
+        data-composition-id="product"
+        data-start="44"
+        data-duration="8"
+        data-label="Product"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #0c0f18 0%, #161b2e 100%)"
+      >
+        <div class="slide-inner">
+          <div id="prod-eyebrow" class="eyebrow" style="color: #38bdf8" data-anim>Product</div>
+          <h2 id="prod-headline" class="headline" style="color: #ffffff; max-width: 1300px" data-anim>
+            FlowDesk's three-module platform cuts the agency ops stack from six tools to one
+          </h2>
+          <div id="prod-modules" style="display: flex; gap: 48px; margin-top: 16px" data-anim>
+            <div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
+              <div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Intake</div>
+              <div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">Smart intake forms with file upload, budget qualifier, and auto-brief generation</div>
+            </div>
+            <div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
+              <div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Approvals</div>
+              <div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">AI-routed review links — one URL, unlimited rounds, full audit trail</div>
+            </div>
+            <div style="flex: 1; padding: 40px; background: rgba(56,189,248,0.08); border-radius: 20px; border: 1px solid rgba(56,189,248,0.2)">
+              <div style="font-size: 48px; font-weight: 800; color: #38bdf8; margin-bottom: 12px">Invoicing</div>
+              <div style="font-size: 36px; color: rgba(255,255,255,0.8); line-height: 1.4">Auto-invoice on approval — Stripe-native, net-terms, retainer billing</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 7 — TRACTION
+           "We crossed $42k MRR in 14 months with 186 paying agencies and 118% NRR"
+           Start: 52  Duration: 8  End: 60
+           Background: emerald dark
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-traction"
+        class="scene-frame clip"
+        data-composition-id="traction"
+        data-start="52"
+        data-duration="8"
+        data-label="Traction"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #051a10 0%, #0a2e1c 100%)"
+      >
+        <div class="slide-inner">
+          <div id="tr-eyebrow" class="eyebrow" style="color: #4ade80" data-anim>Traction</div>
+          <h2 id="tr-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            We crossed $42k MRR in 14 months with 186 paying agencies and 118% NRR
+          </h2>
+          <div id="tr-cards" class="traction-grid" style="margin-top: 16px" data-anim>
+            <div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
+              <span class="traction-number" style="color: #4ade80">$42k</span>
+              <span class="traction-label" style="color: rgba(255,255,255,0.75)">MRR (Apr 2026)</span>
+            </div>
+            <div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
+              <span class="traction-number" style="color: #4ade80">118%</span>
+              <span class="traction-label" style="color: rgba(255,255,255,0.75)">Net Revenue Retention</span>
+            </div>
+            <div class="traction-card" style="background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.2)">
+              <span class="traction-number" style="color: #4ade80">186</span>
+              <span class="traction-label" style="color: rgba(255,255,255,0.75)">Paying agencies, 0 churned in 90 days</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 8 — TEAM
+           "Our three-person founding team has shipped and sold workflow software at Stripe, Figma, and HoneyBook"
+           Start: 60  Duration: 8  End: 68
+           Background: warm charcoal
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-team"
+        class="scene-frame clip"
+        data-composition-id="team"
+        data-start="60"
+        data-duration="8"
+        data-label="Team"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #16100a 0%, #261a0f 100%)"
+      >
+        <div class="slide-inner">
+          <div id="team-eyebrow" class="eyebrow" style="color: #fb923c" data-anim>Team</div>
+          <h2 id="team-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            Our three-person founding team has shipped and sold workflow software at Stripe, Figma, and HoneyBook
+          </h2>
+          <div id="team-cards" class="team-grid" style="margin-top: 16px" data-anim>
+            <div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
+              <span class="team-name" style="color: #fb923c">Sara Okeke</span>
+              <span class="team-role" style="color: rgba(255,255,255,0.7)">CEO &amp; Co-founder</span>
+              <span class="team-bio" style="color: rgba(255,255,255,0.7)">Former PM at Stripe Billing. 2× founder (YC S18).</span>
+            </div>
+            <div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
+              <span class="team-name" style="color: #fb923c">Dev Patel</span>
+              <span class="team-role" style="color: rgba(255,255,255,0.7)">CTO &amp; Co-founder</span>
+              <span class="team-bio" style="color: rgba(255,255,255,0.7)">Eng lead on Figma Comments. Built async review infra used by 4M teams.</span>
+            </div>
+            <div class="team-card" style="background: rgba(251,146,60,0.08); border: 1px solid rgba(251,146,60,0.2)">
+              <span class="team-name" style="color: #fb923c">Leila Hart</span>
+              <span class="team-role" style="color: rgba(255,255,255,0.7)">Head of Revenue</span>
+              <span class="team-bio" style="color: rgba(255,255,255,0.7)">Closed first 200 customers at HoneyBook. Agency market expert.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           SLIDE 9 — ASK
+           "We are raising $4M seed to reach 1,000 customers and $200k MRR in 18 months"
+           Start: 68  Duration: 8  End: 76
+           Background: strong indigo
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-ask"
+        class="scene-frame clip"
+        data-composition-id="ask"
+        data-start="68"
+        data-duration="8"
+        data-label="The ask"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #0d0d2b 0%, #1a1060 100%)"
+      >
+        <div class="slide-inner">
+          <div id="ask-eyebrow" class="eyebrow" style="color: #818cf8" data-anim>The ask</div>
+          <h2 id="ask-headline" class="headline" style="color: #ffffff; max-width: 1400px" data-anim>
+            We are raising $4M seed to reach 1,000 customers and $200k MRR in 18 months
+          </h2>
+          <div id="ask-uses" class="use-list" style="margin-top: 16px" data-anim>
+            <div class="use-item">
+              <span class="use-pct" style="color: #818cf8">50%</span>
+              <span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Eng &amp; product — hire 4 engineers, ship EU data residency + mobile app</span>
+            </div>
+            <div class="use-item">
+              <span class="use-pct" style="color: #818cf8">30%</span>
+              <span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Sales &amp; CS — 3 AEs + partner channel (agencies tool stack)</span>
+            </div>
+            <div class="use-item">
+              <span class="use-pct" style="color: #818cf8">20%</span>
+              <span style="color: rgba(255,255,255,0.85); font-size: 44px; font-weight: 600">Marketing — content-led PLG, SEO moat, case study library</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ══════════════════════════════════════════════════════
+           BRANCH SLIDE — MARKET-DRILL
+           Branch: market-sizing-drill / "Market sizing methodology"
+           Start: 76  Duration: 8  End: 84
+           NOT in main slides array — only in slideSequences
+           Background: charcoal purple (visually distinct from market slide)
+      ═══════════════════════════════════════════════════════════ -->
+      <div
+        id="scene-market-drill"
+        class="scene-frame clip"
+        data-composition-id="market-drill"
+        data-start="76"
+        data-duration="8"
+        data-label="Market math drill-down"
+        data-track-index="1"
+        style="background: linear-gradient(135deg, #0f0a20 0%, #1c1035 100%)"
+      >
+        <div class="slide-inner">
+          <div id="drill-eyebrow" class="eyebrow" style="color: #c084fc" data-anim>Market sizing methodology</div>
+          <h2 id="drill-headline" class="headline" style="color: #ffffff; max-width: 1500px" data-anim>
+            Bottom-up: Dun &amp; Bradstreet lists 1.1M US "design services" firms — we filter to 480k agencies billing &gt;$250k/yr
+          </h2>
+          <div id="drill-steps" style="display: flex; flex-direction: column; gap: 24px; margin-top: 16px" data-anim>
+            <div style="display: flex; gap: 24px; align-items: center">
+              <span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">1.</span>
+              <span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">1.1M Dun &amp; Bradstreet "design services" — filter to 5+ employee, $250k+ revenue</span>
+            </div>
+            <div style="display: flex; gap: 24px; align-items: center">
+              <span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">2.</span>
+              <span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">= 480k addressable agencies × $4,200 ACV (3 seats × $1,400/seat/yr = comparable to HoneyBook)</span>
+            </div>
+            <div style="display: flex; gap: 24px; align-items: center">
+              <span style="font-size: 48px; font-weight: 900; color: #c084fc; min-width: 72px">3.</span>
+              <span style="font-size: 44px; color: rgba(255,255,255,0.85); font-weight: 600">$2.0B SAM. Expand to EU (est. 600k agencies) in Y2 for $4.5B total SAM.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- ── Root timeline (spans full 84s composition) ──────── -->
+      <script>
+        (function () {
+          window.__timelines = window.__timelines || {};
+          var tl = gsap.timeline({ paused: true });
+          tl.to({}, { duration: 84 });
+          window.__timelines["root"] = tl;
+        })();
+      </script>
+
+    </div><!-- end #root -->
+
+    <!-- ── Scene visibility controller + imperative animation driver ──────────
+         Drives each scene's opacity based on playhead (seek-driven visibility).
+         ALSO fires imperative GSAP entrance animations via GSAP's own ticker
+         when a scene transitions from inactive→active. Pain items are revealed
+         imperatively when the playhead crosses their bunched fragment times.
+
+         Fragment times for problem: [8.3, 8.6, 8.9] — bunched near scene start
+         so each ArrowRight advances the playhead to the next reveal within ~300ms.
+    ──────────────────────────────────────────────────────────────────────────── -->
+    <script>
+      (function () {
+        var scenes = [
+          { id: "scene-cover",        start: 0,  end: 8  },
+          { id: "scene-problem",      start: 8,  end: 20 },
+          { id: "scene-solution",     start: 20, end: 28 },
+          { id: "scene-why-now",      start: 28, end: 36 },
+          { id: "scene-market",       start: 36, end: 44 },
+          { id: "scene-product",      start: 44, end: 52 },
+          { id: "scene-traction",     start: 52, end: 60 },
+          { id: "scene-team",         start: 60, end: 68 },
+          { id: "scene-ask",          start: 68, end: 76 },
+          { id: "scene-market-drill", start: 76, end: 84 }
+        ];
+
+        // Fragment config for problem slide: pain items revealed at bunched times
+        var painFragments = [
+          { time: 8.3, id: "prob-pain1" },
+          { time: 8.6, id: "prob-pain2" },
+          { time: 8.9, id: "prob-pain3" }
+        ];
+        var painRevealed = [false, false, false];
+
+        // Track which scene was last active to detect transitions
+        var lastActiveId = null;
+
+        function fireEntranceAnim(scene) {
+          var animEls = scene.querySelectorAll("[data-anim]");
+          if (!animEls.length) return;
+          // Quick crossfade: scene container from 0→1 already handled by visibility controller.
+          // Stagger-in the data-anim elements from below+transparent via GSAP's own ticker.
+          gsap.from(animEls, {
+            opacity: 0,
+            y: 30,
+            duration: 0.45,
+            stagger: 0.08,
+            ease: "power2.out",
+            overwrite: true
+          });
+        }
+
+        function revealPainItem(id) {
+          var el = document.getElementById(id);
+          if (!el) return;
+          gsap.fromTo(el, { opacity: 0, x: -20 }, { opacity: 1, x: 0, duration: 0.4, ease: "power2.out", overwrite: true });
+        }
+
+        function updateVisibility(t) {
+          for (var i = 0; i < scenes.length; i++) {
+            var s = scenes[i];
+            var el = document.getElementById(s.id);
+            if (!el) continue;
+            var isActive = t >= s.start && t < s.end;
+            el.style.opacity = isActive ? "1" : "0";
+            el.style.pointerEvents = isActive ? "auto" : "none";
+
+            // Fire entrance animation when scene BECOMES active
+            if (isActive && lastActiveId !== s.id) {
+              // Reset pain items when re-entering problem scene
+              if (s.id === "scene-problem") {
+                painRevealed = [false, false, false];
+                var pains = ["prob-pain1", "prob-pain2", "prob-pain3"];
+                for (var p = 0; p < pains.length; p++) {
+                  var pEl = document.getElementById(pains[p]);
+                  if (pEl) gsap.set(pEl, { opacity: 0, x: 0, clearProps: "transform" });
+                }
+              }
+              lastActiveId = s.id;
+              fireEntranceAnim(el);
+            }
+          }
+
+          // Fragment reveals for problem slide pain items
+          for (var f = 0; f < painFragments.length; f++) {
+            if (!painRevealed[f] && t >= painFragments[f].time) {
+              painRevealed[f] = true;
+              revealPainItem(painFragments[f].id);
+            }
+          }
+        }
+
+        // Expose so the player / slideshow component can drive it directly
+        window.__hfSetTime = updateVisibility;
+
+        // Show the first slide immediately on load so the deck isn't blank
+        updateVisibility(0);
+
+        // Hook into the root timeline's onUpdate so every seek drives scene visibility
+        function hookRoot() {
+          var root = window.__timelines && window.__timelines["root"];
+          if (root) {
+            root.eventCallback("onUpdate", function () {
+              updateVisibility(root.time());
+            });
+          }
+        }
+        hookRoot();
+      })();
+    </script>
+
+    <!-- ── Bootstrap postMessage for slideshow component ─────
+         Sends the timeline manifest so <hyperframes-slideshow>
+         can discover all scenes (main + branch) without relying
+         on the engine's full runtime injection.
+    ──────────────────────────────────────────────────────── -->
+    <script>
+      (function () {
+        var totalFrames = 84 * 30; // 84s × 30fps = 2520 frames
+        var scenes = [
+          { id: "cover",        start: 0,   duration: 8  },
+          { id: "problem",      start: 8,   duration: 12 },
+          { id: "solution",     start: 20,  duration: 8  },
+          { id: "why-now",      start: 28,  duration: 8  },
+          { id: "market",       start: 36,  duration: 8  },
+          { id: "product",      start: 44,  duration: 8  },
+          { id: "traction",     start: 52,  duration: 8  },
+          { id: "team",         start: 60,  duration: 8  },
+          { id: "ask",          start: 68,  duration: 8  },
+          { id: "market-drill", start: 76,  duration: 8  }
+        ];
+
+        function postTimeline() {
+          parent.postMessage({
+            source: "hf-preview",
+            type: "timeline",
+            durationInFrames: totalFrames,
+            scenes: scenes
+          }, "*");
+        }
+
+        // Post after a brief delay to let the parent frame settle
+        if (window.requestAnimationFrame) {
+          var delayed = function (deadline) {
+            // ~300ms after load
+            setTimeout(postTimeline, 300);
+          };
+          if (document.readyState === "complete") {
+            delayed();
+          } else {
+            window.addEventListener("load", delayed);
+          }
+        } else {
+          setTimeout(postTimeline, 300);
+        }
+      })();
+    </script>
+
+  </body>
+</html>