From e2846eb7cc81821f7fc21a9c4dccdd85c7ef3429 Mon Sep 17 00:00:00 2001
From: vanceingalls <vance@heygen.com>
Date: Fri, 24 Jul 2026 05:25:41 +0000
Subject: [PATCH] fix(registry): encapsulate caption template runtimes in IIFEs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

caption-highlight was already IIFE-wrapped; the other four leaked their
runtime (hfAttach/hfBuild/...) as script-scope globals. Harmless when boot
was synchronous, but the data-driven retrofit defers attach behind
fonts.ready + the sibling fetch — with two caption components pasted into
one composition document, every script finishes before any deferred boot
runs, the last script's definitions win the shared scope, and the first
component never registers its timeline (a renderer waiting on it hangs to
timeout). Wrapping each template's script keeps its internals private so
each boot attaches its own component. window.__HF_CAPTION_ATTACH__ remains
intentionally window-scoped (last-defined-wins).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../caption-editorial-emphasis.html           | 1076 +++++++-------
 .../caption-emoji-pop/caption-emoji-pop.html  | 1282 +++++++++--------
 .../caption-pill-karaoke.html                 |  890 ++++++------
 .../caption-weight-shift.html                 |  952 ++++++------
 4 files changed, 2129 insertions(+), 2071 deletions(-)

diff --git a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
index 38c86f294..83f808425 100644
--- a/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
+++ b/registry/components/caption-editorial-emphasis/caption-editorial-emphasis.html
@@ -122,569 +122,581 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-editorial-emphasis";
-      var HF_ROOT_ID = "editorial-emphasis";
-      var HF_GROUP_SELECTOR = ".caption-block";
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-editorial-emphasis";
+        var HF_ROOT_ID = "editorial-emphasis";
+        var HF_GROUP_SELECTOR = ".caption-block";
 
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
 
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
 
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
-        }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
-        }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
-
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
-        }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
-        }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
-
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
-
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+          out.sort(function (a, b) {
+            return a.start - b.start;
+          });
+          return out.filter(function (w) {
+            return w.text.length > 0;
           });
-          return;
         }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
+        }
+
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+        }
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
+        }
+
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
+
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
               }
             }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
+        }
+
+        var HF_STOPWORDS = new Set([
+          "the",
+          "a",
+          "an",
+          "and",
+          "or",
+          "but",
+          "is",
+          "are",
+          "was",
+          "were",
+          "to",
+          "of",
+          "in",
+          "on",
+          "at",
+          "for",
+          "with",
+          "by",
+          "from",
+          "as",
+          "it",
+          "its",
+          "this",
+          "that",
+          "these",
+          "those",
+          "be",
+          "been",
+          "have",
+          "has",
+          "had",
+          "do",
+          "does",
+          "did",
+          "will",
+          "would",
+          "could",
+          "should",
+          "may",
+          "might",
+          "must",
+          "can",
+          "if",
+          "then",
+          "so",
+          "just",
+          "not",
+          "no",
+          "yes",
+          "up",
+          "out",
+          "about",
+          "into",
+          "over",
+          "after",
+          "before",
+          "your",
+          "you",
+          "our",
+          "we",
+          "they",
+          "them",
+          "their",
+          "there",
+          "here",
+          "when",
+          "what",
+          "which",
+          "who",
+          "how",
+          "all",
+          "any",
+          "some",
+          "more",
+          "most",
+          "other",
+          "than",
+          "too",
+          "very",
+          "also",
+          "because",
+        ]);
+
+        function hfIsEmphasisWord(text) {
+          var clean = String(text)
+            .toLowerCase()
+            .replace(/[^a-z]/g, "");
+          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+        }
+
+        var DURATION, SAFE_WIDTH;
+        var ENTRY_DUR = 0.1;
+        var SLIDE_DUR = 0.2;
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
+
+        var W = [];
+        var BLOCKS = [];
+
+        var MAX_WORDS_PER_BLOCK = 5;
+        var PAUSE_THRESHOLD = 0.1;
+
+        function hfMakeBlocks(words) {
+          var blocks = [];
+          var current = [];
+          words.forEach(function (w, i) {
+            current.push(i);
+            var isEmph = hfIsEmphasisWord(w.text);
+            var punctuation = /[,.:!?]$/.test(w.text);
+            var next = words[i + 1];
+            var pause = next ? next.start - w.end : Infinity;
             if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
+              isEmph ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_BLOCK ||
+              !next
             ) {
-              contained = false;
+              if (isEmph && current.length > 1) {
+                blocks.push({
+                  line1: current.slice(0, -1).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: [[current[current.length - 1], "e"]],
+                });
+              } else if (isEmph) {
+                blocks.push({ line1: [[current[0], "e"]], line2: null });
+              } else if (current.length > 3) {
+                var split = Math.ceil(current.length / 2);
+                blocks.push({
+                  line1: current.slice(0, split).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: current.slice(split).map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                });
+              } else {
+                blocks.push({
+                  line1: current.map(function (ix) {
+                    return [ix, "n"];
+                  }),
+                  line2: null,
+                });
+              }
+              current = [];
             }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var HF_STOPWORDS = new Set([
-        "the",
-        "a",
-        "an",
-        "and",
-        "or",
-        "but",
-        "is",
-        "are",
-        "was",
-        "were",
-        "to",
-        "of",
-        "in",
-        "on",
-        "at",
-        "for",
-        "with",
-        "by",
-        "from",
-        "as",
-        "it",
-        "its",
-        "this",
-        "that",
-        "these",
-        "those",
-        "be",
-        "been",
-        "have",
-        "has",
-        "had",
-        "do",
-        "does",
-        "did",
-        "will",
-        "would",
-        "could",
-        "should",
-        "may",
-        "might",
-        "must",
-        "can",
-        "if",
-        "then",
-        "so",
-        "just",
-        "not",
-        "no",
-        "yes",
-        "up",
-        "out",
-        "about",
-        "into",
-        "over",
-        "after",
-        "before",
-        "your",
-        "you",
-        "our",
-        "we",
-        "they",
-        "them",
-        "their",
-        "there",
-        "here",
-        "when",
-        "what",
-        "which",
-        "who",
-        "how",
-        "all",
-        "any",
-        "some",
-        "more",
-        "most",
-        "other",
-        "than",
-        "too",
-        "very",
-        "also",
-        "because",
-      ]);
-
-      function hfIsEmphasisWord(text) {
-        var clean = String(text)
-          .toLowerCase()
-          .replace(/[^a-z]/g, "");
-        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
-      }
-
-      var DURATION, SAFE_WIDTH;
-      var ENTRY_DUR = 0.1;
-      var SLIDE_DUR = 0.2;
-
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
-        }
-        return minSize;
-      }
-
-      var CLASS_MAP = { n: "word word--normal", e: "word word--emphasis" };
-
-      var W = [];
-      var BLOCKS = [];
-
-      var MAX_WORDS_PER_BLOCK = 5;
-      var PAUSE_THRESHOLD = 0.1;
-
-      function hfMakeBlocks(words) {
-        var blocks = [];
-        var current = [];
-        words.forEach(function (w, i) {
-          current.push(i);
-          var isEmph = hfIsEmphasisWord(w.text);
-          var punctuation = /[,.:!?]$/.test(w.text);
-          var next = words[i + 1];
-          var pause = next ? next.start - w.end : Infinity;
-          if (
-            isEmph ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_BLOCK ||
-            !next
-          ) {
-            if (isEmph && current.length > 1) {
-              blocks.push({
-                line1: current.slice(0, -1).map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: [[current[current.length - 1], "e"]],
-              });
-            } else if (isEmph) {
-              blocks.push({ line1: [[current[0], "e"]], line2: null });
-            } else if (current.length > 3) {
-              var split = Math.ceil(current.length / 2);
-              blocks.push({
-                line1: current.slice(0, split).map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: current.slice(split).map(function (ix) {
-                  return [ix, "n"];
-                }),
-              });
-            } else {
-              blocks.push({
-                line1: current.map(function (ix) {
-                  return [ix, "n"];
-                }),
-                line2: null,
-              });
-            }
-            current = [];
-          }
-        });
-        return blocks;
-      }
-
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
-
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        var stage = document.getElementById("caption-stage");
-        var fontNormal = Math.round(86 * layout.fontScale);
-        var fontEmphasis = Math.round(180 * layout.fontScale);
-        var marginX = Math.round(60 * layout.scaleX);
-        var blockH = Math.round(430 * layout.fontScale);
-        SAFE_WIDTH = layout.W - marginX * 2;
-        stage.style.left = marginX + "px";
-        stage.style.width = SAFE_WIDTH + "px";
-        stage.style.height = blockH + "px";
-        stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
-
-        W = words;
-        BLOCKS = hfMakeBlocks(words);
-
-        function computeLineSize(linePairs) {
-          var hasEmphasis = linePairs.some(function (p) {
-            return p[1] === "e";
           });
-          var lineText = linePairs
-            .map(function (p) {
-              return W[p[0]].text;
-            })
-            .join(" ");
-          if (hasEmphasis) {
-            return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
-          }
-          return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
+          return blocks;
         }
 
-        function buildBlocks() {
-          BLOCKS.forEach(function (block, bi) {
-            var el = document.createElement("div");
-            el.className = "caption-block";
-            el.id = "b" + bi;
-
-            var l1Size = computeLineSize(block.line1);
-            var l1 = document.createElement("div");
-            l1.className = "caption-line";
-            l1.id = "b" + bi + "L1";
-            block.line1.forEach(function (pair, wi) {
-              var span = document.createElement("span");
-              span.className = CLASS_MAP[pair[1]];
-              span.id = "b" + bi + "L1w" + wi;
-              span.textContent = W[pair[0]].text;
-              span.style.fontSize = l1Size + "px";
-              l1.appendChild(span);
-            });
-            el.appendChild(l1);
-
-            if (block.line2) {
-              var l2Size = computeLineSize(block.line2);
-              var l2 = document.createElement("div");
-              l2.className = "caption-line";
-              l2.id = "b" + bi + "L2";
-              block.line2.forEach(function (pair, wi) {
-                var span = document.createElement("span");
-                span.className = CLASS_MAP[pair[1]];
-                span.id = "b" + bi + "L2w" + wi;
-                span.textContent = W[pair[0]].text;
-                span.style.fontSize = l2Size + "px";
-                l2.appendChild(span);
-              });
-              el.appendChild(l2);
-            }
-
-            stage.appendChild(el);
-          });
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
         }
 
-        buildBlocks();
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          var stage = document.getElementById("caption-stage");
+          var fontNormal = Math.round(86 * layout.fontScale);
+          var fontEmphasis = Math.round(180 * layout.fontScale);
+          var marginX = Math.round(60 * layout.scaleX);
+          var blockH = Math.round(430 * layout.fontScale);
+          SAFE_WIDTH = layout.W - marginX * 2;
+          stage.style.left = marginX + "px";
+          stage.style.width = SAFE_WIDTH + "px";
+          stage.style.height = blockH + "px";
+          stage.style.top = Math.max(0, layout.H - blockH - Math.round(70 * layout.scaleY)) + "px";
 
-        // Scale blocks that exceed safe width
-        function fitBlocks() {
-          BLOCKS.forEach(function (block, bi) {
-            var el = document.getElementById("b" + bi);
-            el.style.opacity = "1";
-            el.style.position = "relative";
-            var lines = el.querySelectorAll(".caption-line");
-            var maxW = 0;
-            lines.forEach(function (line) {
-              if (line.scrollWidth > maxW) maxW = line.scrollWidth;
-            });
-            if (maxW > SAFE_WIDTH) {
-              var s = SAFE_WIDTH / maxW;
-              el.style.transform = "scale(" + s + ")";
-            }
-            el.style.opacity = "0";
-            el.style.position = "";
-          });
-        }
+          W = words;
+          BLOCKS = hfMakeBlocks(words);
 
-        fitBlocks();
-
-        var tl = gsap.timeline({ paused: true });
-
-        var allEls = BLOCKS.map(function (_, i) {
-          return document.getElementById("b" + i);
-        });
-
-        function blockStart(bi) {
-          return W[BLOCKS[bi].line1[0][0]].start;
-        }
-
-        BLOCKS.forEach(function (block, bi) {
-          var el = allEls[bi];
-          var start = blockStart(bi);
-          var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
-
-          // Each block already owns its full opacity lifecycle (set 1 at its
-          // own start, then set back to 0 at its own nextStart below), and
-          // blocks occupy non-overlapping windows, so explicitly hiding every
-          // OTHER block here was redundant and made timeline construction
-          // O(blocks^2) — this collapsed under dense stress transcripts (many
-          // single-word emphasis blocks). Removed; behavior is unchanged
-          // (verified against templates.test.ts).
-
-          tl.set(el, { opacity: 1 }, start);
-
-          block.line1.forEach(function (pair, wi) {
-            var wordEl = document.getElementById("b" + bi + "L1w" + wi);
-            var wordStart = W[pair[0]].start;
-            tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-            tl.to(
-              wordEl,
-              { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-              wordStart,
-            );
-          });
-
-          if (block.line2) {
-            var hasEmphasis = block.line2.some(function (p) {
+          function computeLineSize(linePairs) {
+            var hasEmphasis = linePairs.some(function (p) {
               return p[1] === "e";
             });
-            var l2El = document.getElementById("b" + bi + "L2");
+            var lineText = linePairs
+              .map(function (p) {
+                return W[p[0]].text;
+              })
+              .join(" ");
             if (hasEmphasis) {
-              var l2Start = W[block.line2[0][0]].start;
-              tl.set(l2El, { opacity: 0, x: -layout.W }, start);
-              tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
-            } else {
-              tl.set(l2El, { opacity: 1 }, start);
-              block.line2.forEach(function (pair, wi) {
-                var wordEl = document.getElementById("b" + bi + "L2w" + wi);
-                var wordStart = W[pair[0]].start;
-                tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
-                tl.to(
-                  wordEl,
-                  { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
-                  wordStart,
-                );
-              });
+              return fitFontSize(lineText, fontEmphasis, "800", "Playfair Display", SAFE_WIDTH);
             }
+            return fitFontSize(lineText, fontNormal, "400", "Inter", SAFE_WIDTH);
           }
 
-          tl.set(el, { opacity: 0 }, nextStart);
-        });
+          function buildBlocks() {
+            BLOCKS.forEach(function (block, bi) {
+              var el = document.createElement("div");
+              el.className = "caption-block";
+              el.id = "b" + bi;
 
-        tl.to({}, { duration: DURATION }, 0);
-        return tl;
-      }
+              var l1Size = computeLineSize(block.line1);
+              var l1 = document.createElement("div");
+              l1.className = "caption-line";
+              l1.id = "b" + bi + "L1";
+              block.line1.forEach(function (pair, wi) {
+                var span = document.createElement("span");
+                span.className = CLASS_MAP[pair[1]];
+                span.id = "b" + bi + "L1w" + wi;
+                span.textContent = W[pair[0]].text;
+                span.style.fontSize = l1Size + "px";
+                l1.appendChild(span);
+              });
+              el.appendChild(l1);
 
-      var hfCurrentTimeline = null;
+              if (block.line2) {
+                var l2Size = computeLineSize(block.line2);
+                var l2 = document.createElement("div");
+                l2.className = "caption-line";
+                l2.id = "b" + bi + "L2";
+                block.line2.forEach(function (pair, wi) {
+                  var span = document.createElement("span");
+                  span.className = CLASS_MAP[pair[1]];
+                  span.id = "b" + bi + "L2w" + wi;
+                  span.textContent = W[pair[0]].text;
+                  span.style.fontSize = l2Size + "px";
+                  l2.appendChild(span);
+                });
+                el.appendChild(l2);
+              }
 
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
+              stage.appendChild(el);
+            });
+          }
 
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+          buildBlocks();
+
+          // Scale blocks that exceed safe width
+          function fitBlocks() {
+            BLOCKS.forEach(function (block, bi) {
+              var el = document.getElementById("b" + bi);
+              el.style.opacity = "1";
+              el.style.position = "relative";
+              var lines = el.querySelectorAll(".caption-line");
+              var maxW = 0;
+              lines.forEach(function (line) {
+                if (line.scrollWidth > maxW) maxW = line.scrollWidth;
+              });
+              if (maxW > SAFE_WIDTH) {
+                var s = SAFE_WIDTH / maxW;
+                el.style.transform = "scale(" + s + ")";
+              }
+              el.style.opacity = "0";
+              el.style.position = "";
+            });
+          }
+
+          fitBlocks();
+
+          var tl = gsap.timeline({ paused: true });
+
+          var allEls = BLOCKS.map(function (_, i) {
+            return document.getElementById("b" + i);
           });
-        }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
-        }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
+
+          function blockStart(bi) {
+            return W[BLOCKS[bi].line1[0][0]].start;
+          }
+
+          BLOCKS.forEach(function (block, bi) {
+            var el = allEls[bi];
+            var start = blockStart(bi);
+            var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;
+
+            // Each block already owns its full opacity lifecycle (set 1 at its
+            // own start, then set back to 0 at its own nextStart below), and
+            // blocks occupy non-overlapping windows, so explicitly hiding every
+            // OTHER block here was redundant and made timeline construction
+            // O(blocks^2) — this collapsed under dense stress transcripts (many
+            // single-word emphasis blocks). Removed; behavior is unchanged
+            // (verified against templates.test.ts).
+
+            tl.set(el, { opacity: 1 }, start);
+
+            block.line1.forEach(function (pair, wi) {
+              var wordEl = document.getElementById("b" + bi + "L1w" + wi);
+              var wordStart = W[pair[0]].start;
+              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+              tl.to(
+                wordEl,
+                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                wordStart,
+              );
+            });
+
+            if (block.line2) {
+              var hasEmphasis = block.line2.some(function (p) {
+                return p[1] === "e";
+              });
+              var l2El = document.getElementById("b" + bi + "L2");
+              if (hasEmphasis) {
+                var l2Start = W[block.line2[0][0]].start;
+                tl.set(l2El, { opacity: 0, x: -layout.W }, start);
+                tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: "power2.out" }, l2Start);
+              } else {
+                tl.set(l2El, { opacity: 1 }, start);
+                block.line2.forEach(function (pair, wi) {
+                  var wordEl = document.getElementById("b" + bi + "L2w" + wi);
+                  var wordStart = W[pair[0]].start;
+                  tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: "0% 100%" }, start);
+                  tl.to(
+                    wordEl,
+                    { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: "power2.out" },
+                    wordStart,
+                  );
+                });
+              }
+            }
+
+            tl.set(el, { opacity: 0 }, nextStart);
           });
+
+          tl.to({}, { duration: DURATION }, 0);
+          return tl;
+        }
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
+        }
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-emoji-pop/caption-emoji-pop.html b/registry/components/caption-emoji-pop/caption-emoji-pop.html
index e9837d5f6..6d6f15c69 100644
--- a/registry/components/caption-emoji-pop/caption-emoji-pop.html
+++ b/registry/components/caption-emoji-pop/caption-emoji-pop.html
@@ -125,669 +125,689 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-emoji-pop";
-      var HF_ROOT_ID = "emoji-pop";
-      var HF_GROUP_SELECTOR = ".caption-group";
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-emoji-pop";
+        var HF_ROOT_ID = "emoji-pop";
+        var HF_GROUP_SELECTOR = ".caption-group";
 
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
 
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
 
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
-        }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
-        }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
-
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
-        }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
-        }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
-
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
-
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+          out.sort(function (a, b) {
+            return a.start - b.start;
           });
-          return;
-        }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
-              }
-            }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var HF_STOPWORDS = new Set([
-        "the",
-        "a",
-        "an",
-        "and",
-        "or",
-        "but",
-        "is",
-        "are",
-        "was",
-        "were",
-        "to",
-        "of",
-        "in",
-        "on",
-        "at",
-        "for",
-        "with",
-        "by",
-        "from",
-        "as",
-        "it",
-        "its",
-        "this",
-        "that",
-        "these",
-        "those",
-        "be",
-        "been",
-        "have",
-        "has",
-        "had",
-        "do",
-        "does",
-        "did",
-        "will",
-        "would",
-        "could",
-        "should",
-        "may",
-        "might",
-        "must",
-        "can",
-        "if",
-        "then",
-        "so",
-        "just",
-        "not",
-        "no",
-        "yes",
-        "up",
-        "out",
-        "about",
-        "into",
-        "over",
-        "after",
-        "before",
-        "your",
-        "you",
-        "our",
-        "we",
-        "they",
-        "them",
-        "their",
-        "there",
-        "here",
-        "when",
-        "what",
-        "which",
-        "who",
-        "how",
-        "all",
-        "any",
-        "some",
-        "more",
-        "most",
-        "other",
-        "than",
-        "too",
-        "very",
-        "also",
-        "because",
-      ]);
-
-      function hfIsEmphasisWord(text) {
-        var clean = String(text)
-          .toLowerCase()
-          .replace(/[^a-z]/g, "");
-        return clean.length >= 5 && !HF_STOPWORDS.has(clean);
-      }
-
-      var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
-      var MAX_WORDS_PER_GROUP = 3;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_FRAMES = 4;
-      var EXIT_FRAMES = 3;
-      var FPS = 30;
-      var ENTRY_DURATION = ENTRY_FRAMES / FPS;
-      var EXIT_DURATION = EXIT_FRAMES / FPS;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var PRIMARY_COLOR = "#FFFFFF";
-      var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
-      var hfPrimaryColor = PRIMARY_COLOR;
-      var hfAccentColors = ACCENT_COLORS;
-      var hfFontScale = 1;
-
-      // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
-      var WORD_EMOJI = {
-        amazing: "🤩",
-        awesome: "🔥",
-        big: "🐘",
-        brain: "🧠",
-        build: "🛠️",
-        built: "🛠️",
-        celebrate: "🎉",
-        change: "🔄",
-        cinema: "🎥",
-        code: "⌨️",
-        customers: "🤝",
-        data: "📊",
-        dream: "💭",
-        easy: "👌",
-        fast: "⚡",
-        fire: "🔥",
-        frame: "🖼️",
-        free: "🎁",
-        fun: "🎈",
-        future: "🔮",
-        global: "🌍",
-        grow: "📈",
-        growth: "📈",
-        heart: "❤️",
-        huge: "🐘",
-        idea: "💡",
-        launch: "🚀",
-        learn: "📚",
-        love: "❤️",
-        magic: "✨",
-        money: "💰",
-        music: "🎵",
-        new: "✨",
-        party: "🎉",
-        perfect: "💯",
-        power: "💪",
-        professional: "✨",
-        rocket: "🚀",
-        save: "🛟",
-        saves: "🛟",
-        secret: "🤫",
-        smart: "🧠",
-        star: "⭐",
-        stop: "✋",
-        strong: "💪",
-        success: "🏆",
-        team: "👥",
-        time: "⏰",
-        today: "📅",
-        video: "📹",
-        win: "🏆",
-        world: "🌍",
-        wow: "😮",
-      };
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            var text = String(item.word || item.text || "").trim();
-            var clean = text.toLowerCase().replace(/[^a-z]/g, "");
-            return {
-              text: text,
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-              emoji: WORD_EMOJI[clean] || null,
-            };
-          })
-          .filter(function (word) {
-            return word.text.length > 0;
+          return out.filter(function (w) {
+            return w.text.length > 0;
           });
-      }
-
-      function seededRandom(seed) {
-        var x = Math.sin(seed * 9999) * 10000;
-        return x - Math.floor(x);
-      }
-
-      function assignWordColors(words, groupIndex) {
-        return words.map(function (word, index) {
-          var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
-          if (hfIsEmphasisWord(word.text)) {
-            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length);
-            return hfAccentColors[ci];
-          }
-          if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
-          var rand = seededRandom(groupIndex * 13 + index);
-          if (rand > 0.55) {
-            var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
-            return hfAccentColors[ci2];
-          }
-          return hfPrimaryColor;
-        });
-      }
-
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
         }
-        return minSize;
-      }
 
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
+        }
 
-      function measureWord(word, fontSize) {
-        measureContext.font = "900 " + fontSize + "px Gabarito";
-        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
-      }
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+        }
 
-      function measureLineWidth(words, fontSize) {
-        return words.reduce(function (total, word, index) {
-          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
-        }, 0);
-      }
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
+        }
 
-      function fitsLine(words) {
-        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var nextWord = words[index + 1];
-          var testGroup = current.concat([word]);
-          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
-            if (current.length) groups.push(makeGroup(current, groups.length));
-            current = [word];
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
             return;
           }
-          current.push(word);
-          var punctuation = /[,.:!?]$/.test(word.text);
-          var pause = nextWord ? nextWord.start - word.end : 0;
-          if (
-            !nextWord ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_GROUP
-          ) {
-            groups.push(makeGroup(current, groups.length));
-            current = [];
-          }
-        });
-        if (current.length) groups.push(makeGroup(current, groups.length));
-        return groups;
-      }
-
-      function makeGroup(words, groupIndex) {
-        var colors = assignWordColors(words, groupIndex);
-        var emoji = null;
-        for (var i = 0; i < words.length; i++) {
-          if (words[i].emoji) {
-            emoji = words[i].emoji;
-            break;
-          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
         }
-        return {
-          words: words.slice(),
-          colors: colors,
-          emoji: emoji,
-          start: words[0].start,
-          end: words[words.length - 1].end,
+
+        var HF_STOPWORDS = new Set([
+          "the",
+          "a",
+          "an",
+          "and",
+          "or",
+          "but",
+          "is",
+          "are",
+          "was",
+          "were",
+          "to",
+          "of",
+          "in",
+          "on",
+          "at",
+          "for",
+          "with",
+          "by",
+          "from",
+          "as",
+          "it",
+          "its",
+          "this",
+          "that",
+          "these",
+          "those",
+          "be",
+          "been",
+          "have",
+          "has",
+          "had",
+          "do",
+          "does",
+          "did",
+          "will",
+          "would",
+          "could",
+          "should",
+          "may",
+          "might",
+          "must",
+          "can",
+          "if",
+          "then",
+          "so",
+          "just",
+          "not",
+          "no",
+          "yes",
+          "up",
+          "out",
+          "about",
+          "into",
+          "over",
+          "after",
+          "before",
+          "your",
+          "you",
+          "our",
+          "we",
+          "they",
+          "them",
+          "their",
+          "there",
+          "here",
+          "when",
+          "what",
+          "which",
+          "who",
+          "how",
+          "all",
+          "any",
+          "some",
+          "more",
+          "most",
+          "other",
+          "than",
+          "too",
+          "very",
+          "also",
+          "because",
+        ]);
+
+        function hfIsEmphasisWord(text) {
+          var clean = String(text)
+            .toLowerCase()
+            .replace(/[^a-z]/g, "");
+          return clean.length >= 5 && !HF_STOPWORDS.has(clean);
+        }
+
+        var DURATION, SAFE_ZONE_WIDTH, CAPTION_FONT_SIZE, WORD_SPACING;
+        var MAX_WORDS_PER_GROUP = 3;
+        var PAUSE_THRESHOLD = 0.1;
+        var ENTRY_FRAMES = 4;
+        var EXIT_FRAMES = 3;
+        var FPS = 30;
+        var ENTRY_DURATION = ENTRY_FRAMES / FPS;
+        var EXIT_DURATION = EXIT_FRAMES / FPS;
+        var FONT_WIDTH_SAFETY = 1.14;
+        var PRIMARY_COLOR = "#FFFFFF";
+        var ACCENT_COLORS = ["#FF76FF", "#FF0002", "#B2F7FF"];
+        var hfPrimaryColor = PRIMARY_COLOR;
+        var hfAccentColors = ACCENT_COLORS;
+        var hfFontScale = 1;
+
+        // Emoji map for a generic keyword lexicon (not tied to the demo transcript)
+        var WORD_EMOJI = {
+          amazing: "🤩",
+          awesome: "🔥",
+          big: "🐘",
+          brain: "🧠",
+          build: "🛠️",
+          built: "🛠️",
+          celebrate: "🎉",
+          change: "🔄",
+          cinema: "🎥",
+          code: "⌨️",
+          customers: "🤝",
+          data: "📊",
+          dream: "💭",
+          easy: "👌",
+          fast: "⚡",
+          fire: "🔥",
+          frame: "🖼️",
+          free: "🎁",
+          fun: "🎈",
+          future: "🔮",
+          global: "🌍",
+          grow: "📈",
+          growth: "📈",
+          heart: "❤️",
+          huge: "🐘",
+          idea: "💡",
+          launch: "🚀",
+          learn: "📚",
+          love: "❤️",
+          magic: "✨",
+          money: "💰",
+          music: "🎵",
+          new: "✨",
+          party: "🎉",
+          perfect: "💯",
+          power: "💪",
+          professional: "✨",
+          rocket: "🚀",
+          save: "🛟",
+          saves: "🛟",
+          secret: "🤫",
+          smart: "🧠",
+          star: "⭐",
+          stop: "✋",
+          strong: "💪",
+          success: "🏆",
+          team: "👥",
+          time: "⏰",
+          today: "📅",
+          video: "📹",
+          win: "🏆",
+          world: "🌍",
+          wow: "😮",
         };
-      }
 
-      function shadowForColor(color) {
-        var hex = color.replace("#", "");
-        var r = parseInt(hex.slice(0, 2), 16);
-        var g = parseInt(hex.slice(2, 4), 16);
-        var b = parseInt(hex.slice(4, 6), 16);
-        return (
-          "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
-          r +
-          "," +
-          g +
-          "," +
-          b +
-          ",1), 0 0 8px rgba(" +
-          r +
-          "," +
-          g +
-          "," +
-          b +
-          ",0.6)"
-        );
-      }
-
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupText = group.words
-            .map(function (w) {
-              return w.text.toUpperCase();
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              var text = String(item.word || item.text || "").trim();
+              var clean = text.toLowerCase().replace(/[^a-z]/g, "");
+              return {
+                text: text,
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+                emoji: WORD_EMOJI[clean] || null,
+              };
             })
-            .join(" ");
-          var computedSize = fitFontSize(
-            groupText,
-            CAPTION_FONT_SIZE,
-            "900",
-            "Gabarito",
-            SAFE_ZONE_WIDTH,
-          );
-          var groupEl = document.createElement("div");
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
+            .filter(function (word) {
+              return word.text.length > 0;
+            });
+        }
 
-          if (group.emoji) {
-            var emojiEl = document.createElement("div");
-            emojiEl.className = "caption-emoji";
-            emojiEl.textContent = group.emoji;
-            emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
-            groupEl.appendChild(emojiEl);
+        function seededRandom(seed) {
+          var x = Math.sin(seed * 9999) * 10000;
+          return x - Math.floor(x);
+        }
+
+        function assignWordColors(words, groupIndex) {
+          return words.map(function (word, index) {
+            var clean = word.text.toLowerCase().replace(/[^a-z]/g, "");
+            if (hfIsEmphasisWord(word.text)) {
+              var ci = Math.floor(
+                seededRandom(groupIndex * 23 + index * 31) * hfAccentColors.length,
+              );
+              return hfAccentColors[ci];
+            }
+            if (HF_STOPWORDS.has(clean)) return hfPrimaryColor;
+            var rand = seededRandom(groupIndex * 13 + index);
+            if (rand > 0.55) {
+              var ci2 = Math.floor(rand * hfAccentColors.length) % hfAccentColors.length;
+              return hfAccentColors[ci2];
+            }
+            return hfPrimaryColor;
+          });
+        }
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
           }
+          return minSize;
+        }
 
-          var lineEl = document.createElement("div");
-          lineEl.className = "caption-line";
-          group.words.forEach(function (word, wordIndex) {
-            var color = group.colors[wordIndex] || hfPrimaryColor;
-            var wordEl = document.createElement("span");
-            wordEl.className = "caption-word";
-            wordEl.textContent = word.text.toUpperCase();
-            wordEl.style.color = color;
-            wordEl.style.fontSize = computedSize + "px";
-            wordEl.style.textShadow = shadowForColor(color);
-            lineEl.appendChild(wordEl);
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
+
+        function measureWord(word, fontSize) {
+          measureContext.font = "900 " + fontSize + "px Gabarito";
+          return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;
+        }
+
+        function measureLineWidth(words, fontSize) {
+          return words.reduce(function (total, word, index) {
+            return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);
+          }, 0);
+        }
+
+        function fitsLine(words) {
+          return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;
+        }
+
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var nextWord = words[index + 1];
+            var testGroup = current.concat([word]);
+            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {
+              if (current.length) groups.push(makeGroup(current, groups.length));
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var punctuation = /[,.:!?]$/.test(word.text);
+            var pause = nextWord ? nextWord.start - word.end : 0;
+            if (
+              !nextWord ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_GROUP
+            ) {
+              groups.push(makeGroup(current, groups.length));
+              current = [];
+            }
           });
+          if (current.length) groups.push(makeGroup(current, groups.length));
+          return groups;
+        }
 
-          groupEl.appendChild(lineEl);
-          stage.appendChild(groupEl);
-        });
-      }
+        function makeGroup(words, groupIndex) {
+          var colors = assignWordColors(words, groupIndex);
+          var emoji = null;
+          for (var i = 0; i < words.length; i++) {
+            if (words[i].emoji) {
+              emoji = words[i].emoji;
+              break;
+            }
+          }
+          return {
+            words: words.slice(),
+            colors: colors,
+            emoji: emoji,
+            start: words[0].start,
+            end: words[words.length - 1].end,
+          };
+        }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
-
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-        WORD_SPACING = Math.round(14 * layout.fontScale);
-        hfFontScale = layout.fontScale;
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(280 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
-
-        var rootEl = document.getElementById(HF_ROOT_ID);
-        var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
-        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-        hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
-        hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
-          ? [accent]
-          : ["#FF76FF", "#FF0002", "#B2F7FF"];
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        var visibleStarts = GROUPS.map(function (group, groupIndex) {
-          var prev = GROUPS[groupIndex - 1];
-          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-          var entryLead = Math.min(ENTRY_DURATION, availableGap);
-          return Math.max(0, group.start - entryLead);
-        });
-
-        var allGroupEls = GROUPS.map(function (_, i) {
-          return document.getElementById("caption-group-" + i);
-        });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = allGroupEls[groupIndex];
-          var visibleStart = visibleStarts[groupIndex];
-          var visibleEnd =
-            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-          var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
-
-          // Each group already owns its full opacity lifecycle (set 0 at its
-          // own visibleStart, animated to 1, then set back to 0 at its own
-          // visibleEnd below), and groups occupy non-overlapping windows, so
-          // explicitly hiding every OTHER group here was redundant and made
-          // timeline construction O(groups^2) — this collapsed under dense
-          // stress transcripts (many short groups). Removed; behavior is
-          // unchanged (verified against templates.test.ts).
-
-          tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
-          tl.to(
-            groupEl,
-            { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-            visibleStart,
+        function shadowForColor(color) {
+          var hex = color.replace("#", "");
+          var r = parseInt(hex.slice(0, 2), 16);
+          var g = parseInt(hex.slice(2, 4), 16);
+          var b = parseInt(hex.slice(4, 6), 16);
+          return (
+            "0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(" +
+            r +
+            "," +
+            g +
+            "," +
+            b +
+            ",1), 0 0 8px rgba(" +
+            r +
+            "," +
+            g +
+            "," +
+            b +
+            ",0.6)"
           );
-          tl.to(
-            groupEl,
-            {
-              scaleX: 0.75,
-              opacity: 0.8,
-              duration: EXIT_DURATION,
-              ease: "power2.in",
-              force3D: true,
-            },
-            exitStart,
-          );
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-        });
-
-        return tl;
-      }
-
-      var hfCurrentTimeline = null;
-
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
         }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
 
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupText = group.words
+              .map(function (w) {
+                return w.text.toUpperCase();
+              })
+              .join(" ");
+            var computedSize = fitFontSize(
+              groupText,
+              CAPTION_FONT_SIZE,
+              "900",
+              "Gabarito",
+              SAFE_ZONE_WIDTH,
+            );
+            var groupEl = document.createElement("div");
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+
+            if (group.emoji) {
+              var emojiEl = document.createElement("div");
+              emojiEl.className = "caption-emoji";
+              emojiEl.textContent = group.emoji;
+              emojiEl.style.fontSize = Math.round(56 * hfFontScale) + "px";
+              groupEl.appendChild(emojiEl);
+            }
+
+            var lineEl = document.createElement("div");
+            lineEl.className = "caption-line";
+            group.words.forEach(function (word, wordIndex) {
+              var color = group.colors[wordIndex] || hfPrimaryColor;
+              var wordEl = document.createElement("span");
+              wordEl.className = "caption-word";
+              wordEl.textContent = word.text.toUpperCase();
+              wordEl.style.color = color;
+              wordEl.style.fontSize = computedSize + "px";
+              wordEl.style.textShadow = shadowForColor(color);
+              lineEl.appendChild(wordEl);
+            });
+
+            groupEl.appendChild(lineEl);
+            stage.appendChild(groupEl);
           });
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
+
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+          WORD_SPACING = Math.round(14 * layout.fontScale);
+          hfFontScale = layout.fontScale;
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(280 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(80 * layout.scaleY) + "px";
+
+          var rootEl = document.getElementById(HF_ROOT_ID);
+          var primary = getComputedStyle(rootEl).getPropertyValue("--hf-caption-primary").trim();
+          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+          hfPrimaryColor = /^#[0-9a-f]{6}$/i.test(primary) ? primary : "#FFFFFF";
+          hfAccentColors = /^#[0-9a-f]{6}$/i.test(accent)
+            ? [accent]
+            : ["#FF76FF", "#FF0002", "#B2F7FF"];
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
           });
+
+          var tl = gsap.timeline({ paused: true });
+
+          var visibleStarts = GROUPS.map(function (group, groupIndex) {
+            var prev = GROUPS[groupIndex - 1];
+            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+            var entryLead = Math.min(ENTRY_DURATION, availableGap);
+            return Math.max(0, group.start - entryLead);
+          });
+
+          var allGroupEls = GROUPS.map(function (_, i) {
+            return document.getElementById("caption-group-" + i);
+          });
+
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = allGroupEls[groupIndex];
+            var visibleStart = visibleStarts[groupIndex];
+            var visibleEnd =
+              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+            var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);
+
+            // Each group already owns its full opacity lifecycle (set 0 at its
+            // own visibleStart, animated to 1, then set back to 0 at its own
+            // visibleEnd below), and groups occupy non-overlapping windows, so
+            // explicitly hiding every OTHER group here was redundant and made
+            // timeline construction O(groups^2) — this collapsed under dense
+            // stress transcripts (many short groups). Removed; behavior is
+            // unchanged (verified against templates.test.ts).
+
+            tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);
+            tl.to(
+              groupEl,
+              {
+                opacity: 1,
+                scaleX: 1,
+                duration: ENTRY_DURATION,
+                ease: "power3.out",
+                force3D: true,
+              },
+              visibleStart,
+            );
+            tl.to(
+              groupEl,
+              {
+                scaleX: 0.75,
+                opacity: 0.8,
+                duration: EXIT_DURATION,
+                ease: "power2.in",
+                force3D: true,
+              },
+              exitStart,
+            );
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+          });
+
+          return tl;
+        }
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
+        }
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
index f57bbd163..341400fb8 100644
--- a/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
+++ b/registry/components/caption-pill-karaoke/caption-pill-karaoke.html
@@ -131,478 +131,492 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-pill-karaoke";
-      var HF_ROOT_ID = "pill-karaoke";
-      var HF_GROUP_SELECTOR = ".caption-group";
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-pill-karaoke";
+        var HF_ROOT_ID = "pill-karaoke";
+        var HF_GROUP_SELECTOR = ".caption-group";
 
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
 
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
 
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
-        }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
-        }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
-
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
-        }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
-        }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
-
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
-
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+          out.sort(function (a, b) {
+            return a.start - b.start;
           });
-          return;
-        }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
-              }
-            }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
-      var PILL_MIN_PADDING_X = 30;
-      var PILL_MAX_PADDING_X = 60;
-      var FONT_WIDTH_SAFETY = 1.18;
-      var FONT_FAMILY = "Poppins";
-      var FONT_WEIGHT = "700";
-      var MAX_WORDS_PER_GROUP = 4;
-      var PAUSE_THRESHOLD = 0.1;
-      var GROUP_END_BUFFER = 0.3;
-      var COLOR_INACTIVE = "#A6A6A6";
-      var COLOR_ACTIVE = "#1C1E1D";
-      var hfColorActive = COLOR_ACTIVE;
-      var COLOR_FADE_DURATION = 0.1;
-      var WORD_FADE_LEAD = 0.05;
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            var text = String(item.word || item.text || "").trim();
-            return {
-              text: text,
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            };
-          })
-          .filter(function (w) {
+          return out.filter(function (w) {
             return w.text.length > 0;
           });
-      }
-
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
-
-      function measureWordWidth(text, fontSize) {
-        measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
-        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
-      }
-
-      function measureLineWidth(words, fontSize) {
-        return words.reduce(function (total, word, index) {
-          return (
-            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)
-          );
-        }, 0);
-      }
-
-      function splitLinesForGroup(words, fontSize) {
-        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
-        if (
-          words.some(function (w) {
-            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
-          })
-        ) {
-          return null;
         }
-        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
-        var bestSplit = null;
-        var bestImbalance = Infinity;
-        for (var split = 1; split < words.length; split++) {
-          var firstLine = words.slice(0, split);
-          var secondLine = words.slice(split);
-          var firstWidth = measureLineWidth(firstLine, fontSize);
-          var secondWidth = measureLineWidth(secondLine, fontSize);
-          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
-            var imbalance = Math.abs(firstWidth - secondWidth);
-            if (imbalance < bestImbalance) {
-              bestSplit = [firstLine, secondLine];
-              bestImbalance = imbalance;
+
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
+        }
+
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
+          }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
+        }
+
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
+          } else {
+            root.style.removeProperty("--hf-caption-primary");
+          }
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
+          }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
+        }
+
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
+
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
+            return;
+          }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
+        }
+
+        var DURATION, SAFE_ZONE_WIDTH, PILL_MAX_WIDTH, BASE_FONT_SIZE, MIN_FONT_SIZE, WORD_SPACING;
+        var PILL_MIN_PADDING_X = 30;
+        var PILL_MAX_PADDING_X = 60;
+        var FONT_WIDTH_SAFETY = 1.18;
+        var FONT_FAMILY = "Poppins";
+        var FONT_WEIGHT = "700";
+        var MAX_WORDS_PER_GROUP = 4;
+        var PAUSE_THRESHOLD = 0.1;
+        var GROUP_END_BUFFER = 0.3;
+        var COLOR_INACTIVE = "#A6A6A6";
+        var COLOR_ACTIVE = "#1C1E1D";
+        var hfColorActive = COLOR_ACTIVE;
+        var COLOR_FADE_DURATION = 0.1;
+        var WORD_FADE_LEAD = 0.05;
+
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              var text = String(item.word || item.text || "").trim();
+              return {
+                text: text,
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              };
+            })
+            .filter(function (w) {
+              return w.text.length > 0;
+            });
+        }
+
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
+
+        function measureWordWidth(text, fontSize) {
+          measureContext.font = FONT_WEIGHT + " " + fontSize + "px " + FONT_FAMILY;
+          return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;
+        }
+
+        function measureLineWidth(words, fontSize) {
+          return words.reduce(function (total, word, index) {
+            return (
+              total +
+              measureWordWidth(word.text.toLowerCase(), fontSize) +
+              (index ? WORD_SPACING : 0)
+            );
+          }, 0);
+        }
+
+        function splitLinesForGroup(words, fontSize) {
+          var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;
+          if (
+            words.some(function (w) {
+              return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;
+            })
+          ) {
+            return null;
+          }
+          if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];
+          var bestSplit = null;
+          var bestImbalance = Infinity;
+          for (var split = 1; split < words.length; split++) {
+            var firstLine = words.slice(0, split);
+            var secondLine = words.slice(split);
+            var firstWidth = measureLineWidth(firstLine, fontSize);
+            var secondWidth = measureLineWidth(secondLine, fontSize);
+            if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {
+              var imbalance = Math.abs(firstWidth - secondWidth);
+              if (imbalance < bestImbalance) {
+                bestSplit = [firstLine, secondLine];
+                bestImbalance = imbalance;
+              }
             }
           }
+          return bestSplit;
         }
-        return bestSplit;
-      }
 
-      function fitsInTwoLinesAtSize(words, fontSize) {
-        return splitLinesForGroup(words, fontSize) !== null;
-      }
+        function fitsInTwoLinesAtSize(words, fontSize) {
+          return splitLinesForGroup(words, fontSize) !== null;
+        }
 
-      function planPillLayout(words, fontSize) {
-        var lines = splitLinesForGroup(words, fontSize) || [words];
-        var widestLine = lines.reduce(function (max, lineWords) {
-          return Math.max(max, measureLineWidth(lineWords, fontSize));
-        }, 0);
-        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
-        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
-        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
-        return { lines: lines, padX: padX, pillWidth: pillWidth };
-      }
+        function planPillLayout(words, fontSize) {
+          var lines = splitLinesForGroup(words, fontSize) || [words];
+          var widestLine = lines.reduce(function (max, lineWords) {
+            return Math.max(max, measureLineWidth(lineWords, fontSize));
+          }, 0);
+          var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);
+          var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));
+          var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));
+          return { lines: lines, padX: padX, pillWidth: pillWidth };
+        }
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var testGroup = current.concat([word]);
-          var nextWord = words[index + 1];
-          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
-          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
-          if (wouldExceedMaxWords || wouldExceedTwoLines) {
-            if (current.length) {
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var testGroup = current.concat([word]);
+            var nextWord = words[index + 1];
+            var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;
+            var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);
+            if (wouldExceedMaxWords || wouldExceedTwoLines) {
+              if (current.length) {
+                groups.push({
+                  words: current.slice(),
+                  start: current[0].start,
+                  end: current[current.length - 1].end,
+                });
+              }
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var hasPunctuation = /[,.:!?]$/.test(word.text);
+            var pauseDuration = nextWord ? nextWord.start - word.end : 0;
+            var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
+            var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
+            if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
               groups.push({
                 words: current.slice(),
                 start: current[0].start,
                 end: current[current.length - 1].end,
               });
+              current = [];
             }
-            current = [word];
-            return;
-          }
-          current.push(word);
-          var hasPunctuation = /[,.:!?]$/.test(word.text);
-          var pauseDuration = nextWord ? nextWord.start - word.end : 0;
-          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;
-          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;
-          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {
+          });
+          if (current.length)
             groups.push({
               words: current.slice(),
               start: current[0].start,
               end: current[current.length - 1].end,
             });
-            current = [];
+          return groups;
+        }
+
+        function fontSizeForGroup(words) {
+          var size = BASE_FONT_SIZE;
+          while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
+            size -= 2;
           }
-        });
-        if (current.length)
-          groups.push({
-            words: current.slice(),
-            start: current[0].start,
-            end: current[current.length - 1].end,
-          });
-        return groups;
-      }
-
-      function fontSizeForGroup(words) {
-        var size = BASE_FONT_SIZE;
-        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {
-          size -= 2;
+          return size;
         }
-        return size;
-      }
 
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupEl = document.createElement("div");
-          var pillEl = document.createElement("div");
-          var copyEl = document.createElement("div");
-          var fontSize = fontSizeForGroup(group.words);
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
-          pillEl.className = "caption-pill";
-          copyEl.className = "caption-copy";
-          copyEl.style.fontSize = fontSize + "px";
-          var indexedWords = group.words.map(function (word, wordIndex) {
-            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
-          });
-          var layout = planPillLayout(indexedWords, fontSize);
-          pillEl.style.width = layout.pillWidth + "px";
-          pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
-          pillEl.style.paddingLeft = layout.padX + "px";
-          pillEl.style.paddingRight = layout.padX + "px";
-          layout.lines.slice(0, 2).forEach(function (lineWords) {
-            var lineEl = document.createElement("div");
-            lineEl.className = "caption-line";
-            lineWords.forEach(function (word) {
-              var wordEl = document.createElement("span");
-              wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
-              wordEl.className = "caption-word";
-              wordEl.textContent = word.text.toLowerCase();
-              lineEl.appendChild(wordEl);
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupEl = document.createElement("div");
+            var pillEl = document.createElement("div");
+            var copyEl = document.createElement("div");
+            var fontSize = fontSizeForGroup(group.words);
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+            pillEl.className = "caption-pill";
+            copyEl.className = "caption-copy";
+            copyEl.style.fontSize = fontSize + "px";
+            var indexedWords = group.words.map(function (word, wordIndex) {
+              return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };
             });
-            copyEl.appendChild(lineEl);
-          });
-          pillEl.appendChild(copyEl);
-          groupEl.appendChild(pillEl);
-          stage.appendChild(groupEl);
-        });
-      }
-
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
-
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
-        MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
-        PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
-        WORD_SPACING = Math.round(16 * layout.fontScale);
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(220 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
-
-        var rootEl = document.getElementById(HF_ROOT_ID);
-        var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
-        hfColorActive = accent || COLOR_ACTIVE;
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = document.getElementById("caption-group-" + groupIndex);
-          var nextGroup = GROUPS[groupIndex + 1];
-          var isLastGroup = groupIndex === GROUPS.length - 1;
-          var effectiveEnd = isLastGroup
-            ? DURATION
-            : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
-          var visibleStart = Math.max(0, group.start);
-          var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
-
-          tl.set(groupEl, { opacity: 1 }, visibleStart);
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-
-          group.words.forEach(function (word, wordIndex) {
-            var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
-            var isFirstWord = wordIndex === 0;
-            var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
-            tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
-            if (isFirstWord) return;
-            tl.to(
-              wordEl,
-              { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
-              wordStart,
-            );
-          });
-        });
-
-        return tl;
-      }
-
-      var hfCurrentTimeline = null;
-
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
-        }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
-
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+            var layout = planPillLayout(indexedWords, fontSize);
+            pillEl.style.width = layout.pillWidth + "px";
+            pillEl.style.maxWidth = PILL_MAX_WIDTH + "px";
+            pillEl.style.paddingLeft = layout.padX + "px";
+            pillEl.style.paddingRight = layout.padX + "px";
+            layout.lines.slice(0, 2).forEach(function (lineWords) {
+              var lineEl = document.createElement("div");
+              lineEl.className = "caption-line";
+              lineWords.forEach(function (word) {
+                var wordEl = document.createElement("span");
+                wordEl.id = "caption-word-" + groupIndex + "-" + word.wordIndex;
+                wordEl.className = "caption-word";
+                wordEl.textContent = word.text.toLowerCase();
+                lineEl.appendChild(wordEl);
+              });
+              copyEl.appendChild(lineEl);
+            });
+            pillEl.appendChild(copyEl);
+            groupEl.appendChild(pillEl);
+            stage.appendChild(groupEl);
           });
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
+
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          BASE_FONT_SIZE = Math.round(72 * layout.fontScale);
+          MIN_FONT_SIZE = Math.round(52 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1600 * layout.scaleX);
+          PILL_MAX_WIDTH = SAFE_ZONE_WIDTH;
+          WORD_SPACING = Math.round(16 * layout.fontScale);
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(220 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(90 * layout.scaleY) + "px";
+
+          var rootEl = document.getElementById(HF_ROOT_ID);
+          var accent = getComputedStyle(rootEl).getPropertyValue("--hf-caption-accent").trim();
+          hfColorActive = accent || COLOR_ACTIVE;
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
           });
+
+          var tl = gsap.timeline({ paused: true });
+
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = document.getElementById("caption-group-" + groupIndex);
+            var nextGroup = GROUPS[groupIndex + 1];
+            var isLastGroup = groupIndex === GROUPS.length - 1;
+            var effectiveEnd = isLastGroup
+              ? DURATION
+              : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);
+            var visibleStart = Math.max(0, group.start);
+            var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);
+
+            tl.set(groupEl, { opacity: 1 }, visibleStart);
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+
+            group.words.forEach(function (word, wordIndex) {
+              var wordEl = document.getElementById("caption-word-" + groupIndex + "-" + wordIndex);
+              var isFirstWord = wordIndex === 0;
+              var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);
+              tl.set(wordEl, { color: isFirstWord ? hfColorActive : COLOR_INACTIVE }, visibleStart);
+              if (isFirstWord) return;
+              tl.to(
+                wordEl,
+                { color: hfColorActive, duration: COLOR_FADE_DURATION, ease: "none" },
+                wordStart,
+              );
+            });
+          });
+
+          return tl;
+        }
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
+        }
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>
diff --git a/registry/components/caption-weight-shift/caption-weight-shift.html b/registry/components/caption-weight-shift/caption-weight-shift.html
index 3689dfa40..f2c42f10f 100644
--- a/registry/components/caption-weight-shift/caption-weight-shift.html
+++ b/registry/components/caption-weight-shift/caption-weight-shift.html
@@ -117,511 +117,523 @@
     </div>
 
     <script>
-      var HF_COMPOSITION_ID = "caption-weight-shift";
-      var HF_ROOT_ID = "weight-shift";
-      var HF_GROUP_SELECTOR = ".caption-group";
+      // IIFE: keep every template's runtime private to itself so two caption
+      // components pasted into one composition document can't clobber each
+      // other's hfAttach/hfBuild via shared script-scope names (boot is async,
+      // so collisions surface AFTER all scripts have executed).
+      (function () {
+        var HF_COMPOSITION_ID = "caption-weight-shift";
+        var HF_ROOT_ID = "weight-shift";
+        var HF_GROUP_SELECTOR = ".caption-group";
 
-      var HF_DEMO_DATA = {
-        version: 1,
-        segments: [
-          {
-            start: 0,
-            text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
-            words: [
-              { text: "Every", start: 0.0, end: 0.3 },
-              { text: "great", start: 0.3, end: 0.55 },
-              { text: "video", start: 0.55, end: 0.85 },
-              { text: "starts", start: 0.85, end: 1.1 },
-              { text: "with", start: 1.1, end: 1.25 },
-              { text: "a", start: 1.25, end: 1.35 },
-              { text: "single", start: 1.35, end: 1.65 },
-              { text: "frame.", start: 1.65, end: 2.0 },
-              { text: "HyperFrames", start: 2.1, end: 2.65 },
-              { text: "lets", start: 2.65, end: 2.85 },
-              { text: "you", start: 2.85, end: 2.95 },
-              { text: "write", start: 2.95, end: 3.15 },
-              { text: "HTML", start: 3.15, end: 3.55 },
-              { text: "and", start: 3.55, end: 3.65 },
-              { text: "render", start: 3.65, end: 3.95 },
-              { text: "professional", start: 3.95, end: 4.45 },
-              { text: "video.", start: 4.45, end: 4.8 },
-              { text: "No", start: 4.9, end: 5.05 },
-              { text: "timeline.", start: 5.05, end: 5.45 },
-              { text: "No", start: 5.5, end: 5.65 },
-              { text: "drag", start: 5.65, end: 5.85 },
-              { text: "and", start: 5.85, end: 5.95 },
-              { text: "drop.", start: 5.95, end: 6.25 },
-              { text: "Just", start: 6.35, end: 6.55 },
-              { text: "code", start: 6.55, end: 6.8 },
-              { text: "that", start: 6.8, end: 6.95 },
-              { text: "becomes", start: 6.95, end: 7.3 },
-              { text: "cinema.", start: 7.3, end: 7.7 },
-            ],
-          },
-        ],
-      };
+        var HF_DEMO_DATA = {
+          version: 1,
+          segments: [
+            {
+              start: 0,
+              text: "Every great video starts with a single frame. HyperFrames lets you write HTML and render professional video. No timeline. No drag and drop. Just code that becomes cinema.",
+              words: [
+                { text: "Every", start: 0.0, end: 0.3 },
+                { text: "great", start: 0.3, end: 0.55 },
+                { text: "video", start: 0.55, end: 0.85 },
+                { text: "starts", start: 0.85, end: 1.1 },
+                { text: "with", start: 1.1, end: 1.25 },
+                { text: "a", start: 1.25, end: 1.35 },
+                { text: "single", start: 1.35, end: 1.65 },
+                { text: "frame.", start: 1.65, end: 2.0 },
+                { text: "HyperFrames", start: 2.1, end: 2.65 },
+                { text: "lets", start: 2.65, end: 2.85 },
+                { text: "you", start: 2.85, end: 2.95 },
+                { text: "write", start: 2.95, end: 3.15 },
+                { text: "HTML", start: 3.15, end: 3.55 },
+                { text: "and", start: 3.55, end: 3.65 },
+                { text: "render", start: 3.65, end: 3.95 },
+                { text: "professional", start: 3.95, end: 4.45 },
+                { text: "video.", start: 4.45, end: 4.8 },
+                { text: "No", start: 4.9, end: 5.05 },
+                { text: "timeline.", start: 5.05, end: 5.45 },
+                { text: "No", start: 5.5, end: 5.65 },
+                { text: "drag", start: 5.65, end: 5.85 },
+                { text: "and", start: 5.85, end: 5.95 },
+                { text: "drop.", start: 5.95, end: 6.25 },
+                { text: "Just", start: 6.35, end: 6.55 },
+                { text: "code", start: 6.55, end: 6.8 },
+                { text: "that", start: 6.8, end: 6.95 },
+                { text: "becomes", start: 6.95, end: 7.3 },
+                { text: "cinema.", start: 7.3, end: 7.7 },
+              ],
+            },
+          ],
+        };
 
-      /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
-      var HF_CONTRACT_VERSION = 1;
-      var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
+        /* ── HyperFrames caption-data runtime (shared across caption templates) ── */
+        var HF_CONTRACT_VERSION = 1;
+        var HF_DEFAULT_RESOLUTION = { width: 1920, height: 1080 };
 
-      function hfFlattenSegments(segments) {
-        var out = [];
-        (segments || []).forEach(function (seg) {
-          ((seg && seg.words) || []).forEach(function (w) {
-            var start = Math.max(0, Number(w.start) || 0);
-            out.push({
-              text: String(w.word || w.text || "").trim(),
-              start: start,
-              end: Math.max(start, Number(w.end) || 0),
+        function hfFlattenSegments(segments) {
+          var out = [];
+          (segments || []).forEach(function (seg) {
+            ((seg && seg.words) || []).forEach(function (w) {
+              var start = Math.max(0, Number(w.start) || 0);
+              out.push({
+                text: String(w.word || w.text || "").trim(),
+                start: start,
+                end: Math.max(start, Number(w.end) || 0),
+              });
             });
           });
-        });
-        out.sort(function (a, b) {
-          return a.start - b.start;
-        });
-        return out.filter(function (w) {
-          return w.text.length > 0;
-        });
-      }
-
-      function hfDeriveDuration(words) {
-        var end = 0;
-        words.forEach(function (w) {
-          if (w.end > end) end = w.end;
-        });
-        return end;
-      }
-
-      function hfValidate(data) {
-        if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
-        if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
-          return { ok: false, reason: "unsupported-version" };
-        }
-        if (!Array.isArray(data.segments) || data.segments.length === 0) {
-          return { ok: false, reason: "no-segments" };
-        }
-        if (data.displayMode != null && data.displayMode !== "full") {
-          return { ok: false, reason: "unsupported-displayMode" };
-        }
-        var words = hfFlattenSegments(data.segments);
-        if (words.length === 0) return { ok: false, reason: "no-words" };
-        return { ok: true, words: words, durationS: hfDeriveDuration(words) };
-      }
-
-      function hfApplyStageConfig(data, durationS) {
-        var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
-        var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
-        var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
-        var root = document.getElementById(HF_ROOT_ID);
-        [document.documentElement, document.body, root].forEach(function (el) {
-          el.style.width = W + "px";
-          el.style.height = H + "px";
-        });
-        root.setAttribute("data-width", String(W));
-        root.setAttribute("data-height", String(H));
-        root.setAttribute("data-duration", String(durationS));
-        var brand = (data && data.brand) || {};
-        if (typeof brand.primaryColor === "string" && brand.primaryColor) {
-          root.style.setProperty("--hf-caption-primary", brand.primaryColor);
-        } else {
-          root.style.removeProperty("--hf-caption-primary");
-        }
-        if (typeof brand.accentColor === "string" && brand.accentColor) {
-          root.style.setProperty("--hf-caption-accent", brand.accentColor);
-        } else {
-          root.style.removeProperty("--hf-caption-accent");
-        }
-        return { W: W, H: H, scaleX: W / 1920, scaleY: H / 1080, fontScale: Math.min(W, H) / 1080 };
-      }
-
-      function hfPublishStatus(status) {
-        window.__HF_CAPTION_STATUS = status;
-        document
-          .getElementById(HF_ROOT_ID)
-          .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
-      }
-
-      function hfRunGate(words, durationS, failReason) {
-        if (failReason) {
-          hfPublishStatus({
-            ok: false,
-            present: false,
-            contained: false,
-            reason: failReason,
-            version: HF_CONTRACT_VERSION,
-            durationS: durationS || 0,
+          out.sort(function (a, b) {
+            return a.start - b.start;
           });
-          return;
-        }
-        var root = document.getElementById(HF_ROOT_ID);
-        var rootRect = root.getBoundingClientRect();
-        var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
-        var present = false;
-        var contained = true;
-        var tokens = [];
-        words.forEach(function (w) {
-          var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
-          if (t) tokens.push(t);
-        });
-        groups.forEach(function (el) {
-          var prevOpacity = el.style.opacity;
-          var prevVisibility = el.style.visibility;
-          el.style.opacity = "1";
-          el.style.visibility = "visible";
-          var r = el.getBoundingClientRect();
-          if (r.width > 0 && r.height > 0) {
-            var text = (el.textContent || "").toLowerCase();
-            for (var i = 0; i < tokens.length; i++) {
-              if (text.indexOf(tokens[i]) !== -1) {
-                present = true;
-                break;
-              }
-            }
-            if (
-              r.left < rootRect.left - 1 ||
-              r.right > rootRect.right + 1 ||
-              r.top < rootRect.top - 1 ||
-              r.bottom > rootRect.bottom + 1
-            ) {
-              contained = false;
-            }
-          }
-          el.style.opacity = prevOpacity;
-          el.style.visibility = prevVisibility;
-        });
-        hfPublishStatus({
-          ok: present && contained,
-          present: present,
-          contained: contained,
-          version: HF_CONTRACT_VERSION,
-          durationS: durationS,
-        });
-      }
-
-      var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
-      var MAX_WORDS_PER_GROUP = 4;
-      var WORD_SPACING_DESIGN = 12;
-      var WORD_SPACING;
-      var PAUSE_THRESHOLD = 0.1;
-      var ENTRY_DURATION = 100 / 1000;
-      var WEIGHT_TRANSITION = 100 / 1000;
-      var FONT_WIDTH_SAFETY = 1.14;
-      var FONT_WEIGHT_LIGHT = 300;
-      var FONT_WEIGHT_BOLD = 700;
-
-      function normalizeWords(rawWords) {
-        return rawWords
-          .map(function (item) {
-            return {
-              text: String(item.word || item.text || "").trim(),
-              start: Math.max(0, Number(item.start) || 0),
-              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
-            };
-          })
-          .filter(function (word) {
-            return word.text.length > 0;
+          return out.filter(function (w) {
+            return w.text.length > 0;
           });
-      }
-
-      var _fitCanvas = document.createElement("canvas");
-      var _fitCtx = _fitCanvas.getContext("2d");
-      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
-        var size = baseFontSize;
-        var minSize = Math.floor(baseFontSize * 0.45);
-        while (size > minSize) {
-          _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
-          if (_fitCtx.measureText(text).width <= maxWidth) return size;
-          size -= 2;
         }
-        return minSize;
-      }
 
-      var measureCanvas = document.createElement("canvas");
-      var measureContext = measureCanvas.getContext("2d");
-
-      function measureWord(word) {
-        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
-      }
-
-      function measureLineWidth(words) {
-        return words.reduce(function (total, word, index) {
-          return total + measureWord(word) + (index ? WORD_SPACING : 0);
-        }, 0);
-      }
-
-      function fitsInTwoLines(words) {
-        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
-      }
-
-      function splitLines(words) {
-        if (words.length < 2) {
-          return [{ words: words, startIndex: 0 }];
+        function hfDeriveDuration(words) {
+          var end = 0;
+          words.forEach(function (w) {
+            if (w.end > end) end = w.end;
+          });
+          return end;
         }
-        var bestSplit = Math.ceil(words.length / 2);
-        var bestDiff = Infinity;
-        for (var s = 1; s < words.length; s++) {
-          var w1 = measureLineWidth(words.slice(0, s));
-          var w2 = measureLineWidth(words.slice(s));
-          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
-            var diff = Math.abs(w1 - w2);
-            if (diff < bestDiff) {
-              bestDiff = diff;
-              bestSplit = s;
-            }
+
+        function hfValidate(data) {
+          if (!data || typeof data !== "object") return { ok: false, reason: "not-an-object" };
+          if (data.version != null && Math.floor(Number(data.version)) > HF_CONTRACT_VERSION) {
+            return { ok: false, reason: "unsupported-version" };
           }
+          if (!Array.isArray(data.segments) || data.segments.length === 0) {
+            return { ok: false, reason: "no-segments" };
+          }
+          if (data.displayMode != null && data.displayMode !== "full") {
+            return { ok: false, reason: "unsupported-displayMode" };
+          }
+          var words = hfFlattenSegments(data.segments);
+          if (words.length === 0) return { ok: false, reason: "no-words" };
+          return { ok: true, words: words, durationS: hfDeriveDuration(words) };
         }
-        var result = [];
-        var line1 = words.slice(0, bestSplit);
-        var line2 = words.slice(bestSplit);
-        if (line1.length) result.push({ words: line1, startIndex: 0 });
-        if (line2.length) result.push({ words: line2, startIndex: line1.length });
-        return result;
-      }
 
-      function avoidSingleWordGroups(groups) {
-        var out = [];
-        groups.forEach(function (group) {
-          if (
-            group.words.length === 1 &&
-            out.length > 0 &&
-            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
-          ) {
-            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+        function hfApplyStageConfig(data, durationS) {
+          var res = (data && data.resolution) || HF_DEFAULT_RESOLUTION;
+          var W = Math.max(1, Math.round(Number(res.width) || HF_DEFAULT_RESOLUTION.width));
+          var H = Math.max(1, Math.round(Number(res.height) || HF_DEFAULT_RESOLUTION.height));
+          var root = document.getElementById(HF_ROOT_ID);
+          [document.documentElement, document.body, root].forEach(function (el) {
+            el.style.width = W + "px";
+            el.style.height = H + "px";
+          });
+          root.setAttribute("data-width", String(W));
+          root.setAttribute("data-height", String(H));
+          root.setAttribute("data-duration", String(durationS));
+          var brand = (data && data.brand) || {};
+          if (typeof brand.primaryColor === "string" && brand.primaryColor) {
+            root.style.setProperty("--hf-caption-primary", brand.primaryColor);
           } else {
-            out.push(group);
+            root.style.removeProperty("--hf-caption-primary");
           }
-        });
-
-        for (var i = 0; i < out.length; i++) {
-          if (out[i].words.length !== 1) continue;
-          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
-            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
-            out.splice(i + 1, 1);
-          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
-            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
-            out.splice(i, 1);
-            i--;
+          if (typeof brand.accentColor === "string" && brand.accentColor) {
+            root.style.setProperty("--hf-caption-accent", brand.accentColor);
+          } else {
+            root.style.removeProperty("--hf-caption-accent");
           }
+          return {
+            W: W,
+            H: H,
+            scaleX: W / 1920,
+            scaleY: H / 1080,
+            fontScale: Math.min(W, H) / 1080,
+          };
         }
 
-        return out;
-      }
+        function hfPublishStatus(status) {
+          window.__HF_CAPTION_STATUS = status;
+          document
+            .getElementById(HF_ROOT_ID)
+            .setAttribute("data-caption-status", status.ok ? "ok" : "failed");
+        }
 
-      function makeGroups(words) {
-        var groups = [];
-        var current = [];
-        words.forEach(function (word, index) {
-          var nextWord = words[index + 1];
-          var testGroup = current.concat([word]);
-          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
-            if (current.length) groups.push(makeGroup(current));
-            current = [word];
+        function hfRunGate(words, durationS, failReason) {
+          if (failReason) {
+            hfPublishStatus({
+              ok: false,
+              present: false,
+              contained: false,
+              reason: failReason,
+              version: HF_CONTRACT_VERSION,
+              durationS: durationS || 0,
+            });
             return;
           }
-          current.push(word);
-          var punctuation = /[,.:!?]$/.test(word.text);
-          var pause = nextWord ? nextWord.start - word.end : 0;
-          if (
-            !nextWord ||
-            punctuation ||
-            pause >= PAUSE_THRESHOLD ||
-            current.length >= MAX_WORDS_PER_GROUP
-          ) {
-            groups.push(makeGroup(current));
-            current = [];
-          }
-        });
-        if (current.length) groups.push(makeGroup(current));
-        return avoidSingleWordGroups(groups);
-      }
+          var root = document.getElementById(HF_ROOT_ID);
+          var rootRect = root.getBoundingClientRect();
+          var groups = root.querySelectorAll(HF_GROUP_SELECTOR);
+          var present = false;
+          var contained = true;
+          var tokens = [];
+          words.forEach(function (w) {
+            var t = w.text.toLowerCase().replace(/[^a-z0-9]/g, "");
+            if (t) tokens.push(t);
+          });
+          groups.forEach(function (el) {
+            var prevOpacity = el.style.opacity;
+            var prevVisibility = el.style.visibility;
+            el.style.opacity = "1";
+            el.style.visibility = "visible";
+            var r = el.getBoundingClientRect();
+            if (r.width > 0 && r.height > 0) {
+              var text = (el.textContent || "").toLowerCase();
+              for (var i = 0; i < tokens.length; i++) {
+                if (text.indexOf(tokens[i]) !== -1) {
+                  present = true;
+                  break;
+                }
+              }
+              if (
+                r.left < rootRect.left - 1 ||
+                r.right > rootRect.right + 1 ||
+                r.top < rootRect.top - 1 ||
+                r.bottom > rootRect.bottom + 1
+              ) {
+                contained = false;
+              }
+            }
+            el.style.opacity = prevOpacity;
+            el.style.visibility = prevVisibility;
+          });
+          hfPublishStatus({
+            ok: present && contained,
+            present: present,
+            contained: contained,
+            version: HF_CONTRACT_VERSION,
+            durationS: durationS,
+          });
+        }
 
-      function makeGroup(words) {
-        return {
-          words: words.slice(),
-          lines: splitLines(words),
-          start: words[0].start,
-          end: words[words.length - 1].end,
-        };
-      }
+        var SAFE_ZONE_WIDTH, MAX_LINE_WIDTH, CAPTION_FONT_SIZE, DURATION;
+        var MAX_WORDS_PER_GROUP = 4;
+        var WORD_SPACING_DESIGN = 12;
+        var WORD_SPACING;
+        var PAUSE_THRESHOLD = 0.1;
+        var ENTRY_DURATION = 100 / 1000;
+        var WEIGHT_TRANSITION = 100 / 1000;
+        var FONT_WIDTH_SAFETY = 1.14;
+        var FONT_WEIGHT_LIGHT = 300;
+        var FONT_WEIGHT_BOLD = 700;
 
-      function buildCaptions(groups) {
-        var stage = document.getElementById("caption-stage");
-        groups.forEach(function (group, groupIndex) {
-          var groupText = group.words
-            .map(function (w) {
-              return w.text.toLowerCase();
+        function normalizeWords(rawWords) {
+          return rawWords
+            .map(function (item) {
+              return {
+                text: String(item.word || item.text || "").trim(),
+                start: Math.max(0, Number(item.start) || 0),
+                end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),
+              };
             })
-            .join(" ");
-          var computedSize = fitFontSize(
-            groupText,
-            CAPTION_FONT_SIZE,
-            "700",
-            "Montserrat",
-            MAX_LINE_WIDTH,
-          );
-          var groupEl = document.createElement("div");
-          var copyEl = document.createElement("div");
-          groupEl.id = "caption-group-" + groupIndex;
-          groupEl.className = "caption-group";
-          copyEl.className = "caption-copy";
-          group.lines.forEach(function (line, lineIndex) {
-            var lineEl = document.createElement("div");
-            lineEl.className = "caption-line";
-            lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
-            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
-            lineEl.style.fontSize = computedSize + "px";
-            lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
-            line.words.forEach(function (word, wordIndex) {
-              var wordEl = document.createElement("span");
-              wordEl.textContent = word.text.toLowerCase();
-              wordEl.style.display = "inline-block";
-              lineEl.appendChild(wordEl);
+            .filter(function (word) {
+              return word.text.length > 0;
             });
-            copyEl.appendChild(lineEl);
+        }
+
+        var _fitCanvas = document.createElement("canvas");
+        var _fitCtx = _fitCanvas.getContext("2d");
+        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {
+          var size = baseFontSize;
+          var minSize = Math.floor(baseFontSize * 0.45);
+          while (size > minSize) {
+            _fitCtx.font = fontWeight + " " + size + "px " + fontFamily;
+            if (_fitCtx.measureText(text).width <= maxWidth) return size;
+            size -= 2;
+          }
+          return minSize;
+        }
+
+        var measureCanvas = document.createElement("canvas");
+        var measureContext = measureCanvas.getContext("2d");
+
+        function measureWord(word) {
+          return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;
+        }
+
+        function measureLineWidth(words) {
+          return words.reduce(function (total, word, index) {
+            return total + measureWord(word) + (index ? WORD_SPACING : 0);
+          }, 0);
+        }
+
+        function fitsInTwoLines(words) {
+          return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;
+        }
+
+        function splitLines(words) {
+          if (words.length < 2) {
+            return [{ words: words, startIndex: 0 }];
+          }
+          var bestSplit = Math.ceil(words.length / 2);
+          var bestDiff = Infinity;
+          for (var s = 1; s < words.length; s++) {
+            var w1 = measureLineWidth(words.slice(0, s));
+            var w2 = measureLineWidth(words.slice(s));
+            if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {
+              var diff = Math.abs(w1 - w2);
+              if (diff < bestDiff) {
+                bestDiff = diff;
+                bestSplit = s;
+              }
+            }
+          }
+          var result = [];
+          var line1 = words.slice(0, bestSplit);
+          var line2 = words.slice(bestSplit);
+          if (line1.length) result.push({ words: line1, startIndex: 0 });
+          if (line2.length) result.push({ words: line2, startIndex: line1.length });
+          return result;
+        }
+
+        function avoidSingleWordGroups(groups) {
+          var out = [];
+          groups.forEach(function (group) {
+            if (
+              group.words.length === 1 &&
+              out.length > 0 &&
+              out[out.length - 1].words.length < MAX_WORDS_PER_GROUP
+            ) {
+              out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));
+            } else {
+              out.push(group);
+            }
           });
-          groupEl.appendChild(copyEl);
-          stage.appendChild(groupEl);
-        });
-      }
 
-      function hfTeardown() {
-        document.getElementById("caption-stage").innerHTML = "";
-      }
-
-      function hfBuild(words, layout, durationS) {
-        DURATION = durationS;
-        CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
-        SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
-        MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
-        WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
-
-        var stage = document.getElementById("caption-stage");
-        var stageHeight = Math.round(278 * layout.fontScale);
-        stage.style.width = SAFE_ZONE_WIDTH + "px";
-        stage.style.height = stageHeight + "px";
-        stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
-
-        measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
-
-        var WORDS = normalizeWords(words);
-        var GROUPS = makeGroups(WORDS);
-        buildCaptions(GROUPS);
-        // set per-group sizing to match the runtime stage
-        GROUPS.forEach(function (_, i) {
-          var el = document.getElementById("caption-group-" + i);
-          el.style.width = SAFE_ZONE_WIDTH + "px";
-          el.style.height = stageHeight + "px";
-        });
-
-        var tl = gsap.timeline({ paused: true });
-
-        var visibleStarts = GROUPS.map(function (group, groupIndex) {
-          var prev = GROUPS[groupIndex - 1];
-          var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
-          var entryLead = Math.min(ENTRY_DURATION, availableGap);
-          return Math.max(0, group.start - entryLead);
-        });
-
-        var allGroupEls = GROUPS.map(function (_, i) {
-          return document.getElementById("caption-group-" + i);
-        });
-
-        GROUPS.forEach(function (group, groupIndex) {
-          var groupEl = allGroupEls[groupIndex];
-          var visibleStart = visibleStarts[groupIndex];
-          var visibleEnd =
-            groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
-
-          // Each group already owns its full opacity lifecycle (set 0 at its
-          // own visibleStart, animated to 1, then set back to 0 at its own
-          // visibleEnd below), and groups occupy non-overlapping windows, so
-          // explicitly hiding every OTHER group here was redundant and made
-          // timeline construction O(groups^2) — this collapsed under dense
-          // stress transcripts (many short groups). Removed; behavior is
-          // unchanged (verified against templates.test.ts).
-
-          tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
-          tl.to(
-            groupEl,
-            { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
-            visibleStart,
-          );
-
-          if (group.lines.length === 2) {
-            var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
-            var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
-            var line2FirstWord = group.lines[1].words[0];
-            var switchTime = line2FirstWord.start;
-
-            tl.to(
-              line1El,
-              { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-              switchTime,
-            );
-            tl.to(
-              line2El,
-              { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
-              switchTime,
-            );
+          for (var i = 0; i < out.length; i++) {
+            if (out[i].words.length !== 1) continue;
+            if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {
+              out[i] = makeGroup(out[i].words.concat(out[i + 1].words));
+              out.splice(i + 1, 1);
+            } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {
+              out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));
+              out.splice(i, 1);
+              i--;
+            }
           }
 
-          tl.set(groupEl, { opacity: 0 }, visibleEnd);
-        });
-
-        return tl;
-      }
-
-      var hfCurrentTimeline = null;
-
-      function hfAttach(data) {
-        var v = hfValidate(data);
-        if (!v.ok) {
-          hfRunGate([], 0, v.reason);
-          return;
+          return out;
         }
-        if (hfCurrentTimeline) {
-          hfCurrentTimeline.kill();
-          hfCurrentTimeline = null;
-        }
-        hfTeardown();
-        var layout = hfApplyStageConfig(data, v.durationS);
-        var tl = hfBuild(v.words, layout, v.durationS);
-        tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
-        // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
-        // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
-        // at t=0 — the first frame would show pre-timeline CSS defaults (usually
-        // hidden). render(time, suppressEvents, force) with force=true bypasses that.
-        tl.render(0, true, true);
-        hfCurrentTimeline = tl;
-        window.__timelines = window.__timelines || {};
-        window.__timelines[HF_COMPOSITION_ID] = tl;
-        hfRunGate(v.words, v.durationS, null);
-      }
-      window.__HF_CAPTION_ATTACH__ = hfAttach;
 
-      (function hfBoot() {
-        function start(data) {
-          var ready =
-            document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
-          ready.then(function () {
-            hfAttach(data);
+        function makeGroups(words) {
+          var groups = [];
+          var current = [];
+          words.forEach(function (word, index) {
+            var nextWord = words[index + 1];
+            var testGroup = current.concat([word]);
+            if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {
+              if (current.length) groups.push(makeGroup(current));
+              current = [word];
+              return;
+            }
+            current.push(word);
+            var punctuation = /[,.:!?]$/.test(word.text);
+            var pause = nextWord ? nextWord.start - word.end : 0;
+            if (
+              !nextWord ||
+              punctuation ||
+              pause >= PAUSE_THRESHOLD ||
+              current.length >= MAX_WORDS_PER_GROUP
+            ) {
+              groups.push(makeGroup(current));
+              current = [];
+            }
+          });
+          if (current.length) groups.push(makeGroup(current));
+          return avoidSingleWordGroups(groups);
+        }
+
+        function makeGroup(words) {
+          return {
+            words: words.slice(),
+            lines: splitLines(words),
+            start: words[0].start,
+            end: words[words.length - 1].end,
+          };
+        }
+
+        function buildCaptions(groups) {
+          var stage = document.getElementById("caption-stage");
+          groups.forEach(function (group, groupIndex) {
+            var groupText = group.words
+              .map(function (w) {
+                return w.text.toLowerCase();
+              })
+              .join(" ");
+            var computedSize = fitFontSize(
+              groupText,
+              CAPTION_FONT_SIZE,
+              "700",
+              "Montserrat",
+              MAX_LINE_WIDTH,
+            );
+            var groupEl = document.createElement("div");
+            var copyEl = document.createElement("div");
+            groupEl.id = "caption-group-" + groupIndex;
+            groupEl.className = "caption-group";
+            copyEl.className = "caption-copy";
+            group.lines.forEach(function (line, lineIndex) {
+              var lineEl = document.createElement("div");
+              lineEl.className = "caption-line";
+              lineEl.id = "caption-group-" + groupIndex + "-line-" + lineIndex;
+              lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;
+              lineEl.style.fontSize = computedSize + "px";
+              lineEl.style.maxWidth = SAFE_ZONE_WIDTH + "px";
+              line.words.forEach(function (word, wordIndex) {
+                var wordEl = document.createElement("span");
+                wordEl.textContent = word.text.toLowerCase();
+                wordEl.style.display = "inline-block";
+                lineEl.appendChild(wordEl);
+              });
+              copyEl.appendChild(lineEl);
+            });
+            groupEl.appendChild(copyEl);
+            stage.appendChild(groupEl);
           });
         }
-        if (window.__HF_CAPTION__) {
-          start(window.__HF_CAPTION__);
-          return;
+
+        function hfTeardown() {
+          document.getElementById("caption-stage").innerHTML = "";
         }
-        fetch("./caption-data.json")
-          .then(function (r) {
-            return r.ok ? r.json() : null;
-          })
-          .catch(function () {
-            return null;
-          })
-          .then(function (json) {
-            start(json || HF_DEMO_DATA);
+
+        function hfBuild(words, layout, durationS) {
+          DURATION = durationS;
+          CAPTION_FONT_SIZE = Math.round(72 * layout.fontScale);
+          SAFE_ZONE_WIDTH = Math.round(1400 * layout.scaleX);
+          MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - Math.round(40 * layout.scaleX);
+          WORD_SPACING = Math.round(WORD_SPACING_DESIGN * layout.fontScale);
+
+          var stage = document.getElementById("caption-stage");
+          var stageHeight = Math.round(278 * layout.fontScale);
+          stage.style.width = SAFE_ZONE_WIDTH + "px";
+          stage.style.height = stageHeight + "px";
+          stage.style.bottom = Math.round(100 * layout.scaleY) + "px";
+
+          measureContext.font = "700 " + CAPTION_FONT_SIZE + "px Montserrat";
+
+          var WORDS = normalizeWords(words);
+          var GROUPS = makeGroups(WORDS);
+          buildCaptions(GROUPS);
+          // set per-group sizing to match the runtime stage
+          GROUPS.forEach(function (_, i) {
+            var el = document.getElementById("caption-group-" + i);
+            el.style.width = SAFE_ZONE_WIDTH + "px";
+            el.style.height = stageHeight + "px";
           });
+
+          var tl = gsap.timeline({ paused: true });
+
+          var visibleStarts = GROUPS.map(function (group, groupIndex) {
+            var prev = GROUPS[groupIndex - 1];
+            var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;
+            var entryLead = Math.min(ENTRY_DURATION, availableGap);
+            return Math.max(0, group.start - entryLead);
+          });
+
+          var allGroupEls = GROUPS.map(function (_, i) {
+            return document.getElementById("caption-group-" + i);
+          });
+
+          GROUPS.forEach(function (group, groupIndex) {
+            var groupEl = allGroupEls[groupIndex];
+            var visibleStart = visibleStarts[groupIndex];
+            var visibleEnd =
+              groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;
+
+            // Each group already owns its full opacity lifecycle (set 0 at its
+            // own visibleStart, animated to 1, then set back to 0 at its own
+            // visibleEnd below), and groups occupy non-overlapping windows, so
+            // explicitly hiding every OTHER group here was redundant and made
+            // timeline construction O(groups^2) — this collapsed under dense
+            // stress transcripts (many short groups). Removed; behavior is
+            // unchanged (verified against templates.test.ts).
+
+            tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);
+            tl.to(
+              groupEl,
+              { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: "power3.out", force3D: true },
+              visibleStart,
+            );
+
+            if (group.lines.length === 2) {
+              var line1El = document.getElementById("caption-group-" + groupIndex + "-line-0");
+              var line2El = document.getElementById("caption-group-" + groupIndex + "-line-1");
+              var line2FirstWord = group.lines[1].words[0];
+              var switchTime = line2FirstWord.start;
+
+              tl.to(
+                line1El,
+                { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+                switchTime,
+              );
+              tl.to(
+                line2El,
+                { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: "power2.out" },
+                switchTime,
+              );
+            }
+
+            tl.set(groupEl, { opacity: 0 }, visibleEnd);
+          });
+
+          return tl;
+        }
+
+        var hfCurrentTimeline = null;
+
+        function hfAttach(data) {
+          var v = hfValidate(data);
+          if (!v.ok) {
+            hfRunGate([], 0, v.reason);
+            return;
+          }
+          if (hfCurrentTimeline) {
+            hfCurrentTimeline.kill();
+            hfCurrentTimeline = null;
+          }
+          hfTeardown();
+          var layout = hfApplyStageConfig(data, v.durationS);
+          var tl = hfBuild(v.words, layout, v.durationS);
+          tl.set({}, {}, v.durationS); // pin timeline length to the data-derived duration
+          // GSAP quirk (confirmed 3.14.2): a fresh timeline already reports position 0,
+          // so seek(0) is treated as a no-op and skips rendering .set() calls scheduled
+          // at t=0 — the first frame would show pre-timeline CSS defaults (usually
+          // hidden). render(time, suppressEvents, force) with force=true bypasses that.
+          tl.render(0, true, true);
+          hfCurrentTimeline = tl;
+          window.__timelines = window.__timelines || {};
+          window.__timelines[HF_COMPOSITION_ID] = tl;
+          hfRunGate(v.words, v.durationS, null);
+        }
+        window.__HF_CAPTION_ATTACH__ = hfAttach;
+
+        (function hfBoot() {
+          function start(data) {
+            var ready =
+              document.fonts && document.fonts.ready ? document.fonts.ready : Promise.resolve();
+            ready.then(function () {
+              hfAttach(data);
+            });
+          }
+          if (window.__HF_CAPTION__) {
+            start(window.__HF_CAPTION__);
+            return;
+          }
+          fetch("./caption-data.json")
+            .then(function (r) {
+              return r.ok ? r.json() : null;
+            })
+            .catch(function () {
+              return null;
+            })
+            .then(function (json) {
+              start(json || HF_DEMO_DATA);
+            });
+        })();
       })();
     </script>
   </body>